jQuery slideToggle只能处理一个div而不是其他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);

});

基本上，当您单击“条目”时，它会正确切换，

但是当您单击“搜索”时，它不会滑动。这一直让我发疯。非常感谢任何帮助。

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);


    });