JQuery Slide-toggle：可见条件

时间：2017-12-21 07:58:54

标签： javascript jquery html css

我的目标是一次只打开一个。为了实现这一点，我想检查一个切换是否是：visible。，并创建一个条件语句来隐藏其他当前打开的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>

1 个答案:

答案 0 :(得分：1)

无论您是打开还是关闭切换，在mid-transition state（转换开始之后）始终是：可见，因此它始终返回<强>真

但是如果您在调用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时，为什么记录不可见？

那是因为就像我说的那样，在幻灯片切换之前或转换中期之前，你必须记录它。因此，当它实际为not visible并且您点击按钮it will log visible and toggle the content to show时，反之亦然。

＆＃13;
＆＃13; 
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");
});
＆＃13; 
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;
  }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题