Question

有没有办法用div下面的div来切换div标签（直到它到达同名的div标签）？

<div class="div">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>

<div class="div">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>

<div class="div">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>

我的jQuery似乎无法正常工作

 jQuery(function() {
 jQuery('.div').click(function() {
    var nextArticle =  jQuery(this).siblings('.job_description.'+jQuery(this))

    if (nextArticle.length) {
        nextArticle.is(':visible') ? nextArticle.slideUp() : nextArticle.slideDown();
    }

    return false;
});
});

由于

Answer 1

您可以使用jQuery的 nextUntil() 和 slideToggle() 在一行中执行此操作：

jQuery('.div').click(function() {
    $(this).nextUntil(':not(.job_description)').slideToggle();
});

检查演示：http://jsfiddle.net/tgr3nyx4/2/

Answer 2

试试这个：

$(document).ready(function() {
    $('.div').click(function() {
        var next = $(this).next();

        while (!next.hasClass('div') && next.length > 0)
        {
            next.slideToggle();
            next = next.next();
        }
    });
});

jQuery.next()函数返回DOM树中的以下兄弟。

顺便说一下，有一个jQuery.slideToggle()函数。您无需检查其是否可见并应用slideUp或slideDown。

这是工作JS Fiddle Demo。

Answer 3

在.div

上使用.nextUntil()

jQuery(this).nextUntil('.div').slideToggle()

如果您需要在后续点击时切换状态，那么slideToggle()也是更好的选择。

＆＃13;

jQuery(function () {
    jQuery('.div').click(function () {
        jQuery(this).nextUntil('.div').slideToggle()
    });
});

＆＃13;

.job_description{
    display:none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="div">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="div">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>
<div class="job_description">Here is more to read.</div>

＆＃13;

为什么你的代码不起作用？

jQuery(this).siblings('.job_description.'+jQuery(this))

会产生类似

的选择器

jQuery(this).siblings('.job_description.[Object]')

as jQuery(this)返回一个对象，而不是类名。此外，兄弟姐妹会给你所有的兄弟姐妹，而不仅仅是当前元素下的兄弟姐妹。

Answer 4

如果您可以控制html标记，我建议使用容器元素并将div类div移动到可以使用jQuery进行排他选择的元素中。类似的东西：

// use a nested slector in jquery:

$('.container > h1').on('click', function(){
  
  // now just toggle the underlying divs
  // "this" = the h1 within the .container div
  
   var parent = $(this).parent('.container');
   parent.children('.job_description').toggle('slow');
  
});

.container > .job_description {
  display : none;
}

.container > h1 {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Here is more to read.</h1>
  <div class="job_description">Here is more to read.</div>
  <div class="job_description">Here is more to read.</div>
  <div class="job_description">Here is more to read.</div>
</div>

<div class="container">
  <h1>Here is more to read.</h1>
  <div class="job_description">Here is more to read.</div>
  <div class="job_description">Here is more to read.</div>
</div>

切换具有相同名称的div标签

4 个答案: