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

How do I make this code work for each click?

本文关键字：单击 适用于 何使此 代码      更新时间：2023-09-26

我有h3块，点击每个块，我就会显示与它相关的部分。它实际上有点像手风琴（隐藏和折叠）。我还为h3标签提供了一个下拉图标，这意味着当打开块时，h3应该有一个指向下方的下拉图标，而其他h3应该有指向右侧的下拉图标。我使用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'});
    }
})

如果将整个块封装在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();
});​

示例

我相信您正在寻找实时

所以它将是这样的：

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

不要编辑它们的css，而是将一个css类设置为"open"（或类似的），然后在单击打开/关闭时添加/删除该类。

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

最好为每种情况创建一个类名，并有效地处理操作

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

$(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');
    }
});

如果不需要动画，您可以从显示/隐藏中删除"慢速"

下面是一个例子。

听起来您需要将点击事件绑定到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。

相关文章：