Question

这似乎应该很简单，但我无法弄清楚。我有2个div，一个隐藏在另一个后面。当您单击顶部div时，底部div滑出。我有css，但我需要它不仅仅是在它徘徊时。所以我尝试使用onclick事件来更改css名称，但它无法正常工作。任何帮助将不胜感激。

HTML

<div onclick="searchShow();" class="header-cart-search-button"> </div>
<div class="header-cart-search-wrapper">
        [search form goes here]
</div>
</div>

JavaScript

<script>
    function scriptShow() {
        $('.header-cart-search-wrapper').addClass( "header-cart-search-wrapper-clicked" ); 
    }
</script>

然后当我在这里时，如何在另一次点击时再次隐藏它？

Answer 1

看来你有一个错字。在您的HTML中，您调用了searchShow()，但在JavaScript中，您已定义了一个名为scriptShow()的函数。

Answer 2

正如已经指出的另一张海报，你的代码中有一个拼写错误，并指的是错误的函数（searchShow vs scriptShow？）

您将希望使用jQuery的toggleClass方法在显示和隐藏状态之间切换（我假设您为其设置CSS转换以获得您提到的滑动行为）：

$('.header-cart-search-wrapper').toggleClass('header-cart-search-wrapper-clicked');

Answer 3

为内部div提供id

<div class="header-cart-search-wrapper" id="wrapper">

if($('#wrapper').hasClass('header-cart-search-wrapper-clicked')) {
  $(#wrapper).removeClass('header-cart-search-wrapper-clicked');
}
else {
  $(#wrapper).addClass('header-cart-search-wrapper-clicked');
}

相反，您可以使用toogleClass（）

单击另一个div移动div

3 个答案: