显示/隐藏切换开关无法正常工作

时间：2018-08-23 12:03:14

标签： jquery

我已经阅读了论坛和教程，但是我是jQuery和JS的初学者。我想在我的页面上有多个切换器，这些切换器在div之外具有显示/隐藏内容，但我无法实现。我最接近的是拥有它们，但是它们都可以一次打开和关闭。

我正在尝试实现以下效果：如果您单击“更多内容指示器”，它将消失，并且将显示隐藏的内容，而在隐藏的内容（现在可见）的末尾将是另一个“隐藏”按钮。

请查看代码，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <style>
    .wrapper {max-width: 1080px; margin: auto;}
    .hidden0 {display: none;}
    .showed0 {display: block;}
    #switcher0 {background: #fff; font-size: 50px; border-style: none; margin: auto; cursor: pointer;}
    .hidden1 {display: none;}
    .showed1 {display: block;}
    #switcher1 {background: #fff; font-size: 50px; border-style: none; margin: auto; cursor: pointer;}
    #hide0 {margin: 20px auto; display: block; cursor: pointer; background: #fff; font-size: 50px; border-style: none;}
    #hide1 {margin: 20px auto; display: block; cursor: pointer; background: #fff; font-size: 50px; border-style: none;}
    </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#toggler0").toggle(800);
            $('#switcher0').toggleClass('showed0 hidden0');
        });
    });

    $("#hide0").click(function(){
        $("#toggler0").hide(800);
    });


    $(document).ready(function(){
        $("button").click(function(){
            $("#toggler1").toggle(800);
            $('#switcher1').toggleClass('showed1 hidden1');
        });
    });

    $("#hide1").click(function(){
        $("#toggler1").hide(800);
    });

</script>
    </head>

    <body>
        <div class="wrapper">

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-8">
                    <img class="img-fluid" src="http://placehold.it/900x600" alt="Placeholder">
                </div>
                <div class="col-md-4 align-self-center">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
                    <button id="switcher0" class="showed0">+<p style="font-size: 16px;">Číst více</p></button>
                </div>
            </div>
        </div>

        <div id="toggler0" style="display: none;">
            <div class="container-fluid" style="margin-top: 20px;">
                <div class="row" style="padding-left: 15px; padding-right: 15px;">
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                </div>
            </div>
            <button id="hide0">&uarr; <p  style="font-size: 16px;">Skrýt</p></button>
        </div>

            <div class="container-fluid" style="margin-top: 30px;">
            <div class="row">
                <div class="col-md-4 align-self-center">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
                    <button id="switcher1" class="showed1">+<p style="font-size: 16px;">Číst více</p></button>
                </div>
                <div class="col-md-8">
                    <img class="img-fluid" src="http://placehold.it/900x600" alt="Placeholder">
                </div>
            </div>
        </div>

            <div id="toggler1" style="display: none;">
            <div class="container-fluid" style="margin-top: 20px;">
                <div class="row" style="padding-left: 15px; padding-right: 15px;">
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                    <div class="col-md-4">
                        <img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
                    </div>
                </div>
            </div>
            <button id="hide1">&uarr; <p  style="font-size: 16px;">Skrýt</p></button>
        </div>

</div><!-- Wrapper -->
</body>
</html>

谢谢大家的帮助。

1 个答案:

答案 0 :(得分：0)

通过两次调用我固定的$("button").click(...)，为每个按钮提供了两个处理程序。

我做了一些进一步的清理工作，以更好地了解正在发生的事情，然后将其缩小以使其更适合SO。

（此外，有很多CSS出现两次，我建议您只保留其中一半，除非您确实打算将其制作成两种不同的样式。）

$(document).ready(function() {

  // Use $("#id") instead of $("button")
  $("#switcher0").click(function() {
    $("#toggler0").toggle(800);
    $('#switcher0').toggleClass('showed0 hidden0');
  });

  $("#hide0").click(function() {
    $("#toggler0").hide(800);
    $('#switcher0').toggleClass('showed0 hidden0');
  });

  // Use $("#id") instead of $("button")
  $("#switcher1").click(function() {
    $("#toggler1").toggle(800);
    $('#switcher1').toggleClass('showed1 hidden1');
  });

  $("#hide1").click(function() {
    $("#toggler1").hide(800);
    $('#switcher1').toggleClass('showed1 hidden1');
  });

});
.wrapper {
  max-width: 740px;
  margin: auto;
}

.hidden0 {
  display: none;
}

.showed0 {
  display: block;
}

#switcher0 {
  background: #fff;
  font-size: 50px;
  border-style: none;
  margin: auto;
  cursor: pointer;
}

.hidden1 {
  display: none;
}

.showed1 {
  display: block;
}

#switcher1 {
  background: #fff;
  font-size: 50px;
  border-style: none;
  margin: auto;
  cursor: pointer;
}

#hide0 {
  margin: 20px auto;
  display: block;
  cursor: pointer;
  background: #fff;
  font-size: 50px;
  border-style: none;
}

#hide1 {
  margin: 20px auto;
  display: block;
  cursor: pointer;
  background: #fff;
  font-size: 50px;
  border-style: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8">
        <img class="img-fluid" src="http://placehold.it/340x260" alt="Placeholder">
      </div>
      <div class="col-md-4 align-self-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
        <button id="switcher0" class="showed0">+<p style="font-size: 16px;">Číst více</p></button>
      </div>
    </div>
  </div>

  <div id="toggler0" style="display: none;">
    <div class="container-fluid" style="margin-top: 20px;">
      <div class="row" style="padding-left: 15px; padding-right: 15px;">
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
      </div>
    </div>
    <button id="hide0">&uarr; <p  style="font-size: 16px;">Skrýt</p></button>
  </div>

  <div class="container-fluid" style="margin-top: 30px;">
    <div class="row">
      <div class="col-md-4 align-self-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
        <button id="switcher1" class="showed1">+<p style="font-size: 16px;">Číst více</p></button>
      </div>
      <div class="col-md-8">
        <img class="img-fluid" src="http://placehold.it/340x260" alt="Placeholder">
      </div>
    </div>
  </div>

  <div id="toggler1" style="display: none;">
    <div class="container-fluid" style="margin-top: 20px;">
      <div class="row" style="padding-left: 15px; padding-right: 15px;">
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
        <div class="col-md-4">
          <img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
        </div>
      </div>
    </div>
    <button id="hide1">&uarr; <p  style="font-size: 16px;">Skrýt</p></button>
  </div>

</div>

相关问题
最新问题