Question

我有一个场景，我需要在链接点击时切换div。但这里要注意的是，我们与 *同一类[点击] 和相同类[打开/切换]

有链接

Toggle工作正常，但我需要

＆＃34;切换我的文字＆＃34;已经打开了下一个＆＃34; textBox＆＃34;
现在，如果用户点击了＆＃34;切换我的text2＆＃34;然后
- ＆＃34;文本框＆＃34; ＆＃34;切换我的文字＆＃34;应该关闭[目前不工作]
- ＆＃34;文本框＆＃34;切换我的text2将被打开。[当前正在工作]

反之亦然。

这是JS小提琴链接

部分代码如下：

$(function () {
  $(".textBox").hide();
  $('a.clickMe').click(function () {
    $(this).nextAll('div.textBox:first').toggle();
  });
});

Answer 1

你只需要隐藏其他div。

$(function () {
    $(".textBox").hide();
    $('a.clickMe').click(function () {
        var target = $(this).nextAll('div.textBox:first');
        $(".textBox").not(target).hide();
        target.toggle();
    });
});

a{cursor:pointer}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<br /><br /><br />
<a class="clickMe">Toggle my text2</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>

编辑：在您发表评论后，您可以按照以下方式进行操作。

$(function () {
    // you may want to set the hidden class directly in the html
    // instead of the line below to avoid the text boxes appearing
    // before the js executed the first time.
    $(".textBox").addClass("hidden");
    $('a.clickMe').click(function () {
        var target = $(this).nextAll('div.textBox:first');
        $(".textBox").not(target).addClass("hidden");
        target.toggleClass("hidden");
    });
});

a {
  cursor: pointer;
}
.hidden {
  display: none;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<br /><br /><br />
<a class="clickMe">Toggle my text2</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>

Answer 2

http://jsfiddle.net/xe18wusw/6/

$(function () {
$(".textBox").hide();
$('a.clickMe').click(function () {
    var thisElem = this;
    var isVisibe = $(thisElem).nextAll('div.textBox:first').is(":visible");
    $(".textBox").each(function(i,elem){
        console.error(thisElem,elem)
        if(thisElem!==elem){
            $(elem).hide();
        }
    });
   // if()
    $(thisElem).nextAll('div.textBox')[isVisibe ? "hide" : "show"]();
    $(thisElem).nextAll('.clickMe:first').nextAll("div.textBox").hide();
   });
});

切换链接[各种链接类]上的div单击Jquery

2 个答案: