Question

我想要一个显示/隐藏另一个div的div。

无法使用切换功能，因为最后它必须使用Cookie（我使用jquery.cookie.js）才能记住重新加载网站时的更改。（我使用Drupal搜索API构建了一个搜索结果，并给出了一些方面。但是，当我选择某个方面的项目时，网站会重新加载，该网站上的某个div可以显示或不显示，并且应该记住它们的状态。） / p>

为什么此代码不起作用？

$('.show').click(function(){

$('.inhaltetest').addClass('block1');
$('.inhaltetest').removeClass('none1');
$('.hideshow').addClass('hide');
$('.hideshow').removeClass('show');
});

$('.hide').click(function(){

$('.inhaltetest').addClass('none1');
$('.inhaltetest').removeClass('block1');
$('.hideshow').addClass('show');
$('.hideshow').removeClass('hide');
});

.none1 {display: none;}
.block1 {display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="hideshow hide">Hide/Show</div>
<div class="inhaltetest block1">Inhalte</div
</div>

Answer 1

为什么您的代码不起作用..因为您add/remove并在单击事件中用作选择器的hide和show类之间进行切换。它可以正常工作，您可以使用$(document).on('click','.hide',function(){和$(document).on('click','.show',function(){
只需单击事件，就更容易使用.toggleClass()

$('.hideshow').on('click', function(){
  $('.inhaltetest').toggleClass('block1 none1');
  $(this).toggleClass('hide show');
});

.none1 {display: none;}
.block1 {display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="hideshow hide">Hide/Show</div>
<div class="inhaltetest block1">Inhalte</div
</div>

更具体地说，您有多个按钮，需要切换它们

$('.hideshow').on('click', function(){
  $('.inhaltetest').not($(this).next('.inhaltetest')).removeClass('block1').addClass('none1');
  $('.hideshow').not($(this)).removeClass('show').addClass('hide');
  $(this).next('.inhaltetest').toggleClass('block1 none1');
  $(this).toggleClass('hide show');
});

.none1 {display: none;}
.block1 {display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="hideshow show">Hide/Show</div>
  <div class="inhaltetest block1">Inhalte</div>
</div>
<div>
  <div class="hideshow hide">Hide/Show</div>
  <div class="inhaltetest none1">Inhalte</div>
</div>

Answer 2

根据我们的问题，您想隐藏/显示另一个div。 toggleClass可以做到这一点。如果您的class show和hide没有任何财产，则不必toggle。由于div已经是block-element，因此您不应添加CSS display:block;

$(".hideshow").on("click", function(){
  $(".inhaltetest").toggleClass("none1");
});

.none1 {display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hideshow hide">Hide/Show</div>
<div class="inhaltetest">Inhalte</div
</div>

尝试此代码段，如果它不符合您的要求。请发表评论。

向选择器添加和删除类不起作用

2 个答案: