Question

我有这段代码：

<a href="#" class="btn">Link1</a>
<a href="#" class="btn">Link2</a>
<a href="#" class="btn">Link3</a>
<div>Content link 1</div>
<div>Content link 2</div>
<div>Content link 3</div>

我希望每个链接都匹配其div（Link1 =＆gt;内容链接1，Link2 =＆gt;内容链接2，等等.....）

我写了这个Javascript

        $('div').hide();

             $(".btn").click(function () {
               $(this).next("div").slideToggle('slow');
           });

但它不起作用。如果有人可以帮助我。

Answer 1

＆＃13;

URL url = new URL("http://correctserviceurl");

＆＃13;

$('div').hide();

$(".btn").click(function () {
  var index = $(this).attr("data-index");
  $("div[data-index!='"+index+"']").slideUp('slow', function(){
    $("div[data-index='"+index+"']").delay(400).slideDown();
  });

});

＆＃13;

Answer 2

您需要在每个内容div和按钮之间创建一个链接以激活它。您还需要将所有内容div启动为隐藏。

＆＃13;

$('.btn').click(function(elm) {
  $('.content').hide();
  console.log($(this).attr('data-link'))
  var id = $(this).attr('data-link')
  $('#' + id).slideToggle('slow')
})

＆＃13;

.content {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-link="link1" href="#" class="btn">Link1</a>
<a data-link="link2" href="#" class="btn">Link2</a>
<a data-link="link3" href="#" class="btn">Link3</a>
<div id="link1" class="content">Content link 1</div>
<div id="link2" class="content">Content link 2</div>
<div id="link3" class="content">Content link 3</div>

＆＃13;

Answer 3

您误解了.next选择器。你总是会选择第一个div。

<a href="#" class="btn" data-rel="div1">Link1</a>
<a href="#" class="btn" data-rel="div2">Link2</a>
<a href="#" class="btn" data-rel="div3">Link3</a>
<div id="div1">Content link 1</div>
<div id="div2">Content link 2</div>
<div id="div3">Content link 3</div>

  $(".btn").click(function (evt) {
   var rel = $(this).attr('data-rel');
   $("#"+rel).slideToggle('slow');
});

Answer 4

对于您提供的标记：

$('div').hide();
$(".btn").click(function() {
    $('div').hide(); // hide open divs
    var index = $(this).siblings().andSelf().index(this);
    $(this).nextAll("div").eq(index).slideToggle('slow');
});

Answer 5

有很多方法可以这样做，但我发现这更容易和方便。我使用过：jQuery的eq（index）。

就像在CSS中我们有标签：nth-child（num）;在JQuery中有这个：eq（index）选择兄弟姐妹的特定标签。

例如：

<强> HTML

<li>1</li> <li>2</li> <li>3</li> <li>4</li>

JQuery

$("li:eq(2)").hide();

现在它做什么选择第三个 li标签并隐藏。是的，它就是 index从0开始（零）

您的解决方案

WORKING:DEMO

HTML 刚刚为您的锚标记添加了ID

<a href="#" class="btn" id="1">Link1</a>

<a href="#" class="btn" id="2">Link2</a>

<a href="#" class="btn" id="3">Link3</a>

<div>Content link 1</div>
<div>Content link 2</div>
<div>Content link 3</div>

<强> JQuery的

$("div").hide(); /* At beginning hiding all div's */ 
$("a").click(function(){
    var curId = this.id; /* Find and store id of <a> tag is clicked */
    var findId = curId-1;/* This is for :eq() selector */
    $("div").slideUp();/*Hide the rest div if visible accept the one clicked */
    $("div:eq("+ findId +")").fadeToggle();
});

切换与内容的链接

5 个答案: