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

【问题标题】：Show/hide toggler not working correctly显示/隐藏切换无法正常工作
【发布时间】：2018-08-23 22:01:26
【问题描述】：

我已经阅读了论坛和教程，但我是 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>

提前感谢大家的帮助。

【问题讨论】：

  • 不工作，为什么？小提琴：jsfiddle.net/npd2qsfm/1 - 我根据建议编辑了脚本： $(document).ready(function(){ $("#hide0").click(function(){ $("#toggler0").hide(800 ); }); $("button").click(function(){ $("#toggler0").toggle(800); $('#switcher0').toggleClass('showed0 hidden0'); }); }); $(document).ready(function(){ $("button").click(function(){ $("#hide1").click(function(){ $("#toggler1").hide(800) ; }); $("#toggler1").toggle(800); $('#switcher1').toggleClass('showed1 hidden1'); }); });
  • 请看我的回答。

标签： jquery


【解决方案1】：

您通过两次调用$("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>

【讨论】：

  • 哦，现在我明白了，感谢您对 CSS 的建议。我肯定会重写它以提高效率。
猜你喜欢
  • 2015-02-27
  • 2022-01-06
  • 2020-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-13
  • 2022-01-22
  • 2017-02-05
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode