JQuery Slide-toggle: видимый условный

Pbalazs89 спросил: 27 ноября 2017 в 06:18 в: javascript

Моя цель - одновременно открывать только один переключатель. Чтобы добиться этого, я хочу проверить, является ли переключатель: visible., И создать условный оператор, чтобы скрыть другие открытые в настоящее время идентификаторы на основе этого. Однако, когда я запускаю свой код, он возвращает false независимо от того, открыт он или нет. Что мне не хватает?

Пожалуйста, смотрите только код, относящийся к .bases в начале js, так как я не создал его для других экземпляров, так как не могу заставить его работать.

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>

JQuery Slide-toggle: видимый условный

0 ответов