Question

我有一个由Web服务生成的重复项（房屋/属性）列表。在<li>内部我已插入一个链接，在每个<li>下方，我想在点击按钮时显示<div>。

所有具有抵押贷款等级的div都是开放的，我只希望打开与该属性相关的那个。这是我的代码：

jQuery('.mortgage-calc').hide();
jQuery('.mc-btn').click( function(e) {
    e.preventDefault(); /* to stop null-link jumping to top  */
    jQuery('.mortgage-calc').slideToggle();
});

我尝试过使用.next（）,. each（）和.find（）没有运气，所以请一定帮助。

Answer 1

如果li有类mc-btn ..请使用此

jQuery('.mortgage-calc').hide();
jQuery('.mc-btn').click( function(e) {
    e.preventDefault(); /* to stop null-link jumping to top  */
    jQuery('.mortgage-calc').hide();
    $(this).find('.mortgage-calc').slideToggle();
});

如果你的每个li里面都有mc-btn类的按钮

jQuery('.mortgage-calc').hide();
    jQuery('.mc-btn').click( function(e) {
        e.preventDefault(); /* to stop null-link jumping to top  */
        jQuery('.mortgage-calc').hide();
        $(this).closest('li').find('.mortgage-calc').slideToggle();
    });

Answer 2

试试这个：

jQuery(document).ready(function(){
    jQuery('.mortgage-calc').hide();
    jQuery('.mc-btn').click( function(e) {
       e.preventDefault(); /* to stop null-link jumping to top  */
       $(this).children(".mortgage-calc").slideToggle();
    });
})

Answer 3

我认为这就是你要找的东西。由于您单击的链接位于<li>标记内，因此您需要转到该父元素，然后向下遍历树。您可以使用.closest命令启动<li>，然后使用.find或.next转到<div>以切换隐藏的内容。我选择了.next，因为你知道结构总是一样的。

jQuery('.mortgage-calc').hide();
jQuery('.mc-btn').click( function(e) {
    e.preventDefault(); /* to stop null-link jumping to top  */
    jQuery(this).closest('li').next('.mortgage-calc').slideToggle();
});

这是我认为是你的HTML结构和工作代码的小提琴。 Fiddle Example

单击打开单个重复Div

3 个答案:

单击打开单个重复D​​iv

3 个答案:

单击打开单个重复Div