Question

所以我有一些像这样的代码

<ul>
<li>Example</li> 

<li>Example</li>

<li>Example
<a href="#" class="SplitCtrl"> > </a>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>

<li>Example
<a href="#" class="SplitCtrl"> > </a>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>

<li>Example</li>
</ul>

然后我使用像这样的JS代码

$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
    $(".Menu").fadeIn(800).slideDown(800);
});
});

但是当我使用它时，所有“.Menu”元素都会淡入:( 请更正我的代码...

Answer 1

您需要定位.Menu旁边的特定this。 ELse它将使用.Menu类定位所有元素。您可以使用jquery next

$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){  //changed here
    $(this).next(".Menu").fadeIn(800).slideDown(800);
});
});

查看此JSFIDDLE

Answer 2

jQuery不知道要打开哪个元素，因为没有为菜单项分配id。所以它打开.SplitCtrl类中的所有内容，因为它不知道更好。如果您为元素分配了一些ID，那么它将知道要打开什么以及何时打开。使用您的代码以尽量减少修改，以下内容适合您。请注意，在.SplitCtrl项目和.Menu项目的两个中添加了ID，并使用单击功能并传入项目的ID点击源自。如果您嵌入了更多元素，那么在您的课程后面不是 next 元素的情况下，或者如果您希望它在页面上除了菜单项。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li> 

<li>Example</li>

<li>Example
<a href="#" class="SplitCtrl" id="1"> > </a>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>

<li>Example
<a href="#" class="SplitCtrl" id="2"> > </a>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>

<li>Example</li>
</ul>

<div id="surprise1" style="display:none;">Now I'm open too!</div>

</body>
</html>

<script>
$(document).ready(function() {
    $("ul li .SplitCtrl").click(function(event){
        var item = '#menu' + event.target.id;
        var surprise = '#surprise' + event.target.id;
        $(item).fadeIn(800).slideDown(800); // open the menu item
        $(surprise).fadeIn(800).slideDown(800);  // open another element
    });
});
</script>

为了切换项目，您可以添加首先隐藏所有内容的内容，然后使新选择的项目可见：

//...same code as above to this point

<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>

</body>
</html>

<script>
$(document).ready(function() {
    $("ul li .SplitCtrl").click(function(event){
        var item = '#menu' + event.target.id;
        var surprise = '#surprise' + event.target.id;
        $(".Menu").fadeOut(100); // Hide all items of class .Menu
        $(".Surprise").fadeOut(100); // Hide other items of class .Surprise
        $(item).fadeIn(800).slideDown(800); // open the menu item
        $(surprise).fadeIn(800).slideDown(800);  // open another element
    });
});
</script>

现在，该类中的所有.Menu项目都会在显示新项目之前切换（即使一次只显示一个）。注意添加的＆＃34;惊喜＆＃34;能够隐藏所有外部元素。有很多方法可以切换项目，所以这只是你完成它的一种方式。

JQuery每个函数都切换类

2 个答案: