jquery中的下拉列表

Question

<div class="header-inner">
   <a href="" class="btn-link icon-set menu-hambuger-plus m-l-20 sm-no-margin hidden-sm hidden-xs dropdown-toggle"  data-toggle="quickview" data-toggle-element="#quickview"></a>
</div>



<div id="quickview" class="quickview-wrapper">
    <ul class="nav nav-tabs" >
        <li class="">
            <a href="#quickview-notes" data-toggle="tab">Notes</a>
        </li>
        <li>
            <a href="#quickview-alerts" data-toggle="tab">Alerts</a>
        </li>
        <li class="active">
            <a href="#quickview-chat" data-toggle="tab">Chat</a>
        </li>
    </ul>
</div>


$(function(){
    $('#quickview').on('click',function(){
        $(this).find('ul').toggle();
    });
});

当我单击图标时，它应该在#quickview 中显示列表。当我单击该图标时，它会转到#quickview，但它没有切换列表。

Answer 1

我可能遗漏了一些东西 - jQuery 只是没有显示 ul？

如果是这样，我认为是因为您的定位不正确。

$(function(){
    $('#quickview').click(function(){
        $(this).find('ul').toggle();
    });
});

Answer 2

从您不完整的示例中，我推断您正在尝试使用 Bootstrap v4 从下拉元素控制选项卡式部分的显示。

首先，我必须警告您，从可用性的角度来看，这是一个坏主意（大多数用户不会理解这是一个选项卡区域，也永远不会看到隐藏选项卡中的内容，因为他们不会打开下拉菜单.

为了让它工作，你不需要任何自定义的 JavaScript，它已经由 Bootstrap 提供，只要你注意它们的标记：

head + body {
  background-color: #f8f8f8;
}
.tab-content {
  background-color: white;
  border: solid #ddd;
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<div class="container">
  <div class="row mt-3">
    <div class="col">
      <ul class="nav nav-tabs">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Select section</a>
          <div class="dropdown-menu">
            <a class="dropdown-item active" href="#one" id="tab-1" data-toggle="tab" role="tab" aria-controls="one" aria-selected="false">Section 1</a>
            <a class="dropdown-item" href="#two" id="tab-2" data-toggle="tab" href="#two" role="tab" aria-controls="twp" aria-selected="false">Section 2</a>
            <a class="dropdown-item" href="#three" id="tab-3" data-toggle="tab" href="#three" role="tab" aria-controls="three" aria-selected="false">Section 3</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#last" id="tab-4" data-toggle="tab" href="#last" role="tab" aria-controls="last" aria-selected="false">Last section</a>
          </div>
        </li>
      </ul>
    </div>
  </div>


  <div class="tab-content p-3">
    <div class="tab-pane fade show active" id="one" role="tabpanel" aria-labelledby="tab-1">
      <p class="lead">Section 1
      <p>Lorem ipsum dolor amet actually selfies iPhone, kinfolk polaroid cold-pressed direct trade pug umami bitters. Direct trade readymade viral, occupy fingerstache pickled actually wayfarers waistcoat whatever succulents. Pinterest mlkshk hell of brooklyn typewriter glossier farm-to-table occupy hoodie edison bulb. Trust fund truffaut pickled fixie, single-origin coffee tumeric cardigan gluten-free schlitz. Ugh quinoa single-origin coffee, ethical waistcoat art party biodiesel activated charcoal.
      </div>
    <div class="tab-pane fade" id="two" role="tabpanel" aria-labelledby="tab-2">
    <p class="lead">Section 2
    <p>Listicle umami neutra, keytar man braid copper mug try-hard thundercats trust fund mixtape fanny pack. 90's you probably haven't heard of them tofu, tumblr umami stumptown freegan kickstarter typewriter keytar. Franzen food truck prism vice. Fashion axe fanny pack food truck flannel thundercats, subway tile XOXO kogi next level air plant pok pok. Tumblr marfa tumeric, four loko sriracha direct trade lumbersexual flexitarian vape selvage.
    </div>
    <div class="tab-pane fade" id="three" role="tabpanel" aria-labelledby="tab-3">
    <p class="lead">Section 3
    <p>Af XOXO biodiesel succulents live-edge fashion axe paleo poutine. Street art jianbing 8-bit echo park unicorn trust fund plaid austin lyft actually. Hella tacos selfies, twee normcore locavore coloring book banh mi. Farm-to-table pinterest gentrify glossier whatever enamel pin intelligentsia sustainable green juice selvage readymade.
    </div>
    <div class="tab-pane fade" id="last" role="tabpanel" aria-labelledby="tab-4">
    <p class="lead">Last Section
    <p>Oh. You need a little dummy text for your mockup? How quaint.
    <p>I bet you’re still using Bootstrap too…
    </div>
  </div>
</div>

注意：我添加的 CSS 纯粹是装饰性的，您不需要它来让示例工作。