Question

我想在过滤器部分中隐藏表单而不隐藏标题。

我尝试添加表单标记：

$(this).parents('.filter-section form').toggle("slideUp");

但它不起作用。

这是groupby

$('.filter-section .filter-toggle').click(function() {
  $(this).parents('.filter-section').toggle("slideUp");
});

Answer 1

您可以使用$(this).next('form').toggle("slideUp");：

来完成此操作

更新后的JSFIDDLE。

$('.filter-section .filter-toggle').click(function() {
  $(this).next('form').toggle("slideUp");
});

/*filter*/

.filter {
  border-radius: 5px;
  border: solid 1px #008db0;
  padding: 20px;
  background: #fff;
}
.filter-section {
  border-bottom: solid #000 1px;
  padding: 10px 0 10px 0;
}
.filter-title {
  font-size: 20px;
  font-weight: 900;
}
.filter input[type=checkbox] {
  margin-right: 8px;
}
.filter-section:last-child {
  border-bottom: 0;
}
.filter-section:first-child {
  padding: 0 0 10px 0;
  margin-top: -10px;
}
.filter .rating span {
  position: absolute;
  top: 0px;
  right: 70px;
}
.filter .rating span:before {
  color: gold;
  font-size: 23px;
}
.filter .badge {
  background: #008db0;
  padding: 2px 2px;
  font-weight: normal;
  font-size: 12px;
  border: solid 2px #fff;
  border-radius: 15px;
  box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.39);
  margin: 0;
}
.filter-section form .badge {
  background: #f87e47;
  padding: 3px 1px;
  margin-right: 6px;
}
.filter .more {
  color: #000;
  font-weight: normal;
  font-size: 15px;
  float: right;
  margin: 12px 0 0;
}
#amount-min {
  border: 0;
  color: #f6931f;
  font-weight: bold;
}
#amount-max {
  border: 0;
  color: #f6931f;
  font-weight: bold;
  text-align: right
}
.ranger input {
  width: 78px;
}
.ranger {
  display: flex;
}
.ui-slider-handle {
  border-radius: 10px;
  left: 60%;
}
.ui-slider-range {
  background: #ff7400;
}
.filter-toggle {
  cursor: pointer;
}
.filter-toggle:after {
  float: right;
  content: "\f107";
  font-family: 'FontAwesome';
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' />
<script src='https://use.fontawesome.com/0e9115ffee.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script>


<div class="row">
  <div class="col-md-2 filter">
    <div class="filter-section">
      <p class="filter-title">Etoiles</p>
      <p class="rating rating-5star"><span></span>
      </p>
    </div>

    <div class="filter-section">
      <p class="filter-title filter-toggle">Budget</p>
      <form action="" class="form">
        <p class="ranger">
          <input type="text" id="amount-min" />
          <input type="text" id="amount-max" />
        </p>

        <div id="slider-range"></div>
      </form>
    </div>

    <div class="filter-section">
      <p class="filter-title filter-toggle">Arrangement</p>
      <form id="arrangementfilter" action="">
        <input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Logement Petit Dejeuner</br>
        <input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Demi Pension</br>
        <input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Pension Complete</br>
        <input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive Soft</br>
        <input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive</br>
      </form>
    </div>
    <div class="filter-section">
      <p class="filter-title filter-toggle">Ville</p>
      <form id="cityfilter" action="">
        <input type="checkbox" name="city" value="hammamet" /><span class="badge">157</span>Hammamet</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Sousse</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Monastir</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Mahdia</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tabarka</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Gammarth</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tunis</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Djerba</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Touzeur</br>
        <input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Douz</br>

      </form>
      <a href="#" class="more">Plus des villes <span class="badge">13</span></a>
    </div>

  </div>

只隐藏div中的一个元素

1 个答案: