Question

我有h3块，点击每个块我显示与之关联的部分。它实际上就像手风琴（隐藏和折叠）。我还为h3标记添加了一个放置图标，表示当打开该块时，h3应该有一个指向下方的dropicon，而其他h3应该有一个指向右侧的dropocons。我使用backgroundPosition控制此行为。我正在使用jQuery可见条件来查看特定块是否可见，然后将其放置图标一个背景位置，其余为其他位置。它工作正常，但只适用于第一次点击。它不适用于第二次点击，有人可以解释原因，这是我的代码：

if($(this).next().is(':visible')) {
    $(this).css({'backgroundPosition':'0px 14px'});
}
else {
    $("h3").css({'backgroundPosition':'0px -11px'});
}

更新代码：

$("h3").click(function() {          
    $(".tabs").hide();
    $(this).next().show();

    if($(this).next().is(':visible')) {
        $(this).css({'backgroundPosition':'0px 14px'});
    } else {
        $("h3").css({'backgroundPosition':'0px -11px'});
    }
})

Answer 1

如果将整个块包装在div中，则可以使遍历更容易。

HTML：

<div class="drop-block">
<h3>Click this</h3>
    <ul>
        <li>Drop</li>
        <li>it</li>
        <li>like</li>
        <li>it's</li>
        <li>hot</li>
   </ul>
</div>

Jquery的：

var dropper = $('.drop-block'); 
$(dropper).find('h3').click(function(){ 
    $(this).toggleClass('active');
    $(dropper).find('ul').toggle();
});

Example

Answer 2

我相信你正在寻找live

所以它会是这样的：

$(element).live('click', function(){
    if($(this).next().is(':visible')) {
        $(this).css({'backgroundPosition':'0px 14px'});
    }
    else {
        $("h3").css({'backgroundPosition':'0px -11px'});
    }
}

Answer 3

不要编辑它们的css，而是让css类“打开”（或类似），然后在点击上添加/删除类来打开/关闭。

通过检查类的存在比调查JS中某些东西的css属性要容易得多。

Answer 4

最好为每种情况制作一个类名，并轻松处理动作

$('h3').on('click', function(){
   if($(this).hasClass('opened')) {
     $(this).removeClass('opened');
   }
   else {
      $(this).addClass('opened');
    }
}

Answer 5

听起来您需要将点击事件绑定到h3元素并切换子元素的可见性：

$(function(){
    $("h3").click(function(){
        $(this).next(".tabs").toggle();
    });
});

示例标记：

<h3>Item 1</h3>
<div class="tabs">
    <h4>Option 1</h4>
    <h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
    <h4>Option 1</h4>
    <h4>Option 2</h4>
</div>

这是一个jsFiddle来演示。

Answer 6

$(document).on('click', 'h3', function(e) {          
    $(".tabs").hide('slow'); 
    $(this).css({'backgroundPosition':'0px 14px'});

    if(!$(this).next().is(':visible'))
    {
        $("h3").css({'backgroundPosition':'0px -11px'});
        $(this).next().show('slow');
    }
});

如果不需要动画，您可以从show / hide中删除'slow'

这是example。

如何使此代码适用于每次点击？

6 个答案: