jQuery slideToggle 仅适用于一个 div,不适用于其他
jQuery slideToggle only working on one div, and not others
我设置了一个简单的选项卡导航系统,我想对其进行编码以使其更简洁、更模块化。
我制作了一个 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/
谢谢。
尼克
尝试https://jsfiddle.net/g44xt4m8/5/
$(".myPanelNavLi").click(function(){
var choiceValue = $(this).attr("value");
var choice = '.panelTab_' + choiceValue;
$(choice).slideToggle(300);
});
我设置了一个简单的选项卡导航系统,我想对其进行编码以使其更简洁、更模块化。
我制作了一个 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/
谢谢。 尼克
尝试https://jsfiddle.net/g44xt4m8/5/
$(".myPanelNavLi").click(function(){
var choiceValue = $(this).attr("value");
var choice = '.panelTab_' + choiceValue;
$(choice).slideToggle(300);
});