javascript - jQuery slideToggle 仅适用于一个 div，不适用于其他

Question

我设置了一个简单的选项卡导航系统，我想对其进行编码以使其更简洁、更模块化。

我制作了一个 JSFiddle 供您试用。

HTML:

<div class="col-4">
    <nav>
        <ul>
            <li id="tab_entry"      value="0"   class="navActive myPanelNavLi"><span class="fa fa-plus-circle"></span> Entry</li>
            <li id="tab_search"     value="1"   class="myPanelNavLi">Search</li>
        </ul>
   </nav>

<div class="panelTab_0 myPanelActive lightShadow darkBg roundedBottom">
STORAGE ENTRY
</div>

<div class="panelTab_1 myPanelActive lightShadow darkBg roundedBottom">
STORAGE ENTRY
</div>

JS:

    //myPanel sliders
$(".myPanelNavLi").click(function(){

    var choiceValue = $(this).attr("value");
    var choice = '.panelTab_' + choiceValue;
    console.log(choice);

    $(this).parent().parent().next(choice).slideToggle(300);

});

基本上，当您单击“Entry”时，它会正确滑动切换，

但是当你点击搜索的时候，它并没有滑动。这一直让我发疯。非常感谢任何帮助。

https://jsfiddle.net/g44xt4m8/3/

谢谢。 尼克

Answer 1

尝试 https://jsfiddle.net/g44xt4m8/5/

$(".myPanelNavLi").click(function(){

        var choiceValue = $(this).attr("value");
        var choice = '.panelTab_' + choiceValue;

        $(choice).slideToggle(300);


    });