个人中心
gpt4 book ai didi

javascript - JQuery 滑动开关 :visible conditional

转载 作者：太空宇宙 更新时间：2023-11-04 07:48:59 25 4
gpt4 key购买 nike

我的目标是一次只打开一个开关。为此，我想检查切换是否为:可见。，并创建一个条件语句来隐藏其他当前打开的 ID。但是，当我运行我的代码时，无论是否打开，它都会返回 false。我错过了什么？

请只看 js 开头引用 .bases 的代码，因为我没有为其他实例创建它，因为我无法让它工作。

if ($(".bases, .protein, .toppings, .sauces, .extratoppings, .teas, .desserts").is(":visible")) {
  $(".bases, .protein, .toppings, .sauces, .extratoppings, .teas, .desserts").hide();
}


$("#bases").click(function() {
  $(".bases").slideToggle("slow", );

  if ($('.bases').is(':visible')) {
    console.log("visible");
  } else {
    console.log("not visible");
  }
});

$("#protein").click(function() {
  $(".protein").slideToggle("slow");
});

$("#toppings").click(function() {
  $(".toppings").slideToggle("slow");
});

$("#sauces").click(function() {
  $(".sauces").slideToggle("slow");
});

$("#extratoppings").click(function() {
  $(".extratoppings").slideToggle("slow");
});

$("#teas").click(function() {
  $(".teas").slideToggle("slow");
});

$("#desserts").click(function() {
  $(".desserts").slideToggle("slow");
});
  html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Avoid the IE 10-11 `min-height` bug. */
}

.content {
  flex: 1 0 auto;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

.footer {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

a {
  text-decoration: none;
  color: white;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px Sans-Serif;
}

h1 {
  margin: 0 0 20px 0;
}

p {
  margin: 0 0 20px 0;
}

footer {
  background: #42A5F5;
  color: red;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

ul,
li {
  text-decoration: none;
  list-style: none;
  margin: 3%;
  margin-bottom: 5%;
  width: auto;
}

#menuitems {
  display: flex;
  width: auto;
  margin: 0%;
  margin-bottom: 5%;
  align-items: center;
  justify-content: center;
  background: blue;
  color: white;
  text-decoration: none .caloriecalculatormain {
    display: none !important;
  }
<!DOCTYPE html>
<html>

<head>
  <title>Padthai calc</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="content">
    <h1>PADTHAI CALORIE CALCULATOR</h1>
  </div>

  <ul id="menuitems">
    <li><button id="bases">Main Dish</button></li>
    <li><button id="protein">Soup</button></li>
    <li id="teas"><button>Teas</button></li>
    <li id="desserts"><button>Desserts</button></li>
  </ul>
  <div>
    <div class="bases">
      <h1>Main Dish</h1>

      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>133</td>
          <td>152</td>
        </tr>
      </table>
    </div>
    <div class="protein">protein</div>
    <div class="toppings">toppings</div>
    <div class="sauces">sauces</div>
    <div class="extratoppings">extratoppings</div>
    <div class="teas">teas</div>
    <div class="desserts">Desserts</div>
  </div>
</body>

</html>

<style>

</style>


<footer class="footer">
  <div id="total">Total</div>
  <div id="carbs">Carbs</div>
</footer>


</body>


</html>

最佳答案

无论您是打开还是关闭切换开关，在中间过渡状态期间(就在过渡开始之后)将始终是:可见的 ，因此它总是返回 true。

但是如果您在调用 slideToggle 之前使用 .is(":visible") 。然后我们可以利用结构的功能:

$( "#bases" ).click(function() {
   var visibility = $('.bases').is(':visible');
   if(visibility){
      console.log ("not visible");
   }
   else {
      console.log ("visible")
   }
   $( ".bases" ).slideToggle( "slow");
});

现在，您可能会注意到条件似乎有问题。

为什么可见性变量设置为true时日志记录不可见？

那是因为就像我说的，在切换幻灯片之前或过渡期间，您必须记录它。因此，当它实际上不可见并且您单击该按钮时，它将记录可见并切换内容以显示，反之亦然。

if ($(".bases, .protein, .toppings, .sauces, .extratoppings, .teas, .desserts").is(":visible")) {
  $(".bases, .protein, .toppings, .sauces, .extratoppings, .teas, .desserts").hide();
}

$("#bases").click(function() {
  var visibility = $('.bases').is(':visible');
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  $(".bases").slideToggle("slow");
});



$("#protein").click(function() {
  $(".protein").slideToggle("slow");
});

$("#toppings").click(function() {
  $(".toppings").slideToggle("slow");
});

$("#sauces").click(function() {
  $(".sauces").slideToggle("slow");
});

$("#extratoppings").click(function() {
  $(".extratoppings").slideToggle("slow");
});

$("#teas").click(function() {
  $(".teas").slideToggle("slow");
});

$("#desserts").click(function() {
  $(".desserts").slideToggle("slow");
});
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Avoid the IE 10-11 `min-height` bug. */
}

.content {
  flex: 1 0 auto;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

.footer {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

a {
  text-decoration: none;
  color: white;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px Sans-Serif;
}

h1 {
  margin: 0 0 20px 0;
}

p {
  margin: 0 0 20px 0;
}

footer {
  background: #42A5F5;
  color: red;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

ul,
li {
  text-decoration: none;
  list-style: none;
  margin: 3%;
  margin-bottom: 5%;
  width: auto;
}

#menuitems {
  display: flex;
  width: auto;
  margin: 0%;
  margin-bottom: 5%;
  align-items: center;
  justify-content: center;
  background: blue;
  color: white;
  text-decoration: none .caloriecalculatormain {
    display: none !important;
  }
<!DOCTYPE html>
<html>
  <head>
    <title>Padthai calc</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>
    <div class="content">
      <h1>PADTHAI CALORIE CALCULATOR</h1>
    </div>

    <ul id="menuitems">
      <li><button id="bases">Main Dish</button></li>
      <li><button id="protein">Soup</button></li>
      <li id="teas"><button>Teas</button></li>
      <li id="desserts"><button>Desserts</button></li>
    </ul>

    <div>
      <div class="bases">
        <h1>Main Dish</h1>

        <table>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
          </tr>
          <tr>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>UK</td>
          </tr>
          <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Yoshi Tannamuri</td>
            <td>Canada</td>
          </tr>
          <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>133</td>
            <td>152</td>
          </tr>
        </table>
      </div>
      <div class="protein">protein</div>
      <div class="toppings">toppings</div>
      <div class="sauces">sauces</div>
      <div class="extratoppings">extratoppings</div>
      <div class="teas">teas</div>
      <div class="desserts">Desserts</div>
    </div>
  </body>
</html>


<style>

</style>


<footer class="footer">
  <div id="total">Total</div>
  <div id="carbs">Carbs</div>
</footer>


</body>


</html>

关于javascript - JQuery 滑动开关 :visible conditional，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47920412/

25 4 0
文章推荐： java - (ning) 异步 HTTP 客户端是否对查询参数进行编码？
文章推荐： python - pandas groupby 使用一列列表值
文章推荐： c - 设置结构指针的整数会导致段错误
文章推荐： java - 显示列表和 VBO OpenGL/LWJGL
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com