Question

我得到了以下问题，这让我很生气。我试图通过单击搜索按钮打开它来显示/隐藏搜索表单，然后再次关闭它。现在，打开表单按预期工作，但再次单击该图标时，它不会关闭。我没有使用jQuery show（）和hide（）函数，而更喜欢保持这种方式。

我的jQuery是：

$( 'span#search-button' ).click( function() {
    $( 'span#search-button' ).prop( 'id', 'search-button--active' );
    $( '#drawer-search-form' ).removeClass( 'hidden' );
});


// broken bit, what it should do is effectively revert to the hidden state we changed in the previous code, but needless to say it won't.
$( 'span#search-button--active' ).click( function() { 
    $( 'span#search-button--active' ).prop( 'id', 'search-button' );
    $( '#drawer-search-form' ).addClass( 'hidden' );
});

这是相应的HTML：

<div class="drawer-heading">
  <!-- the starting state of the search form is hidden -->
  <div id="drawer-search-form" class="drawer-search-form-style hidden">
    <!--<?php get_search_form(); ?>-->
  </div>
  <div class="drawer-search-button">
     <a href="#search-open">

       <!-- the button that opens and supposedly closes the search form -->
       <span id="search-button" class="fa fa-search fa-border-circle fa-border-circle-fill fa-border-circle-float fa-border-circle-large" aria-hidden="true">
       </span>

      </a>
   </div>
 </div>

现在我尝试过将选择器更改为我能想到的任何东西。我也尝试使用event.preventDefault();来检查是否有其他东西搞乱它但无济于事。我还尝试使用attr代替prop，并将代码的整个结构更改为不同的代码。

我一直在为解决方案漫游，但遗憾的是其他线程中没有任何建议可以解决我的代码。

坦率地说，它不会像第二个jQuery块中指定的那样做。这让我觉得这是一个选择问题;但我确实尝试了一切我能想到的东西来修复选择器......帮助会非常非常感激。

总结一下：我有一个打开搜索表单的按钮。这有效。但是当再次按下该按钮尝试关闭表单时，它不再次隐藏该元素。

Answer 1

由于绑定click事件时，您的ID为search-button--active的按钮不存在，因此该事件永远不会被绑定，因此您的点击不起作用。

为了克服这个问题，你需要delegate the event这样：

// original selector must be something that is there when the binding occurs
$('.drawer-heading').on('click', 'span#search-button--active', function() { 
  $( 'span#search-button--active' ).prop( 'id', 'search-button' );
  $( '#drawer-search-form' ).addClass( 'hidden' );
});

然而，当您绑定一个按钮然后更改ID（我建议不要更改ID）时，我只是更改您的原始代码，而不是更改ID，您添加一个类，然后执行所有逻辑在同一个按钮绑定：

$( 'span#search-button' ).click( function() {
    $(this).toggleClass('active');
    $('#drawer-search-form').toggleClass('hidden');  // as you just seem to be adding and removing a class, you can use toggleClass
});

在上面，您在目标div上以及按钮上切换类，以便可以使用#search-button.active

来定位按钮的任何活动样式

如果你做的事情比翻转课程更复杂，我会这样做：

$( 'span#search-button' ).click( function() {
    var button = $(this);

    if (button.hasClass('active')) {
        button.removeClass('active');
        $('#drawer-search-form').addClass('hidden');
        // do other stuff too
    } else {
        button.addClass('active');
        $('#drawer-search-form').removeClass('hidden');
        // do other stuff too
    }
});

Answer 2

只需使用按钮的ID并使用toggleClass功能添加或删除班级hidden。

$( '#search-button' ).click( function() {

$( '#drawer-search-form' ).toggleClass( 'hidden' );

}）;

Answer 3

你用if if切换它。我不明白你为什么要给另一个身份证。它不起作用，但你可以用类

切换它

$( 'span#search-button' ).click( function() {
  if($(this).hasClass('search-button--active')) {
    $(this).removeClass('search-button--active');
  } else {
    $(this).addClass('search-button--active'); 
  }});

这是我的解决方案。

单击按钮

3 个答案: