Onclick一个元素，滑动切换的div

我想用jquery做一个手风琴开启/关闭div的div。但由于某种原因，jquery中的next（）似乎不起作用。我希望当标题被点击时，所有其他div应该被关闭，除了被点击的那个。Onclick一个元素，滑动切换的div

HTML代码 -

<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div> 
<div class="office">sadasd</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div> 
<div class="office">sadasd</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div>

演示 - https://jsfiddle.net/v3hc19np/1/

任何帮助，高度赞赏。

来源

2017-03-31 Prithviraj Mitra

在此处包含完整的代码。见** [mcve] ** – Tushar

'h3'元素没有兄弟，因此'next（）'什么也没有发现 –

我在下一个之前添加了parent（）。现在它滑落了，但又滑了下来，因为我想要关闭所有其他div。我可能需要更改HTML？ –

和其他人一样，标题旁边没有$.next('div')，所以我将.office移动到了，以便该元素现在与它相邻。用您的原始HTML进行更新。

$(function() { 
 
    var $titles = $('.office-title'), 
 
     $offices = $('.office'); 
 
    $titles.on('click', function() { 
 
    var $target = $(this).parent('.office-row').next('.office'); 
 
    $target.slideToggle(); 
 
    $offices.not($target).slideUp(); 
 
    }); 
 
});

.office { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div>

来源

2017-03-31 16:12:44

非常感谢。是否有可能在不改变html结构的情况下实现这一点。我做了，但没有完美运作。 –

@PrithvirajMitra肯定有可能，但你为什么想？它只会稍微改变JS，但没什么大不了的。如果您现在执行时遇到问题，我怀疑使用原始HTML会改变任何内容。 –

@PrithvirajMitra用您的原始HTML更新了代码 –

解决方案：

你的div不正确的嵌套，从而在未来（ 'DIV'）找不到。下面是它应该是这样：

<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div>

演示： https://jsfiddle.net/v3hc19np/5/

来源

2017-03-31 16:15:57

我们可以循环的元素，并使用无jquery的显示出来，然后用拨动此功能的工作代码为你查询

$('.office-title').click(function() { 
    $(".office").each(function(index,obj){ 
     $(obj).hide(); 
    }); 
    $(e.target).parent().next().slideToggle(); 
    return false; 
    });

来源

2017-03-31 16:20:41 saktivel

Onclick一个元素，滑动切换的div

回答

相关问题