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純粹是裝飾性的，您不需要它來使示例工作。