Jquery显示/隐藏更多数据

时间：2016-11-03 17:50:37

标签： javascript jquery html css

我正在列出div。我用css将可见的div限制为4。我在每个div中放了一个跨度。如果我单击跨度，它将删除限制，并且所有div都可见。

我怎样才能做到这一点，当我点击一次跨度时，它只显示thoose divs，即我点击的跨度的壁橱？

抱歉英文不好。

$(".mutat").click(function(){
      $(".filter_div").removeClass('filter_div');
      $(".mutat").hide();
});

CSS 

.mutat{ 
    font:bold 13px Arial, Helvetica, sans-serif;  
    margin-left:8px; display:block; 
    margin-bottom:15px; 
    cursor:pointer; 
    color:#024385;
}
.filter_div:nth-of-type(n+5) {
    display: none;
}
.filter_div .mutat {
    display: inline;
}

HTML：

<form name="szures_form" method="post">
  <div class="sidebar_div sidebar_price_szuro"> <span class="sidebar_contact_span">Árkategória</span>
    <input id="range_03" value="" name="" >
    <input name="price_from" id="price_from" type="hidden" value="19790">
    <input name="price_to" id="price_to" type="hidden" value="172990">
    <div class="text-center">
      <button type="submit" name="" class="btn szures_btn szures_btn_margin_top">Mehet</button>
    </div>
  </div>
  <div class="sidebar_szuro_div"> <span class="sidebar_contact_span">Gyártó</span>
    <div class="checkbox padding_left_10">
      <label>
        <input type="checkbox" name="gyartok[]" value="8">
        Asus</label>
    </div>
    <div class="checkbox padding_left_10">
      <label>
        <input type="checkbox" name="gyartok[]" value="10">
        Gigabyte</label>
    </div>
    <div class="checkbox padding_left_10">
      <label>
        <input type="checkbox" name="gyartok[]" value="9">
        MSI</label>
    </div>
    <div class="text-center">
      <button type="submit" name="" class="btn szures_btn">Mehet</button>
    </div>
  </div>
  <div class="sidebar_szurok_box">
    <div class="sidebar_szuro_div"><span class="sidebar_contact_span">DirectX verzió</span>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="10.2">
          DX 10.2 </label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="11">
          DX 11 </label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="11.2">
          DX 11.2 </label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12">
          DX 12 </label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12">
          DX 12 </label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12">
          DX 12 </label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12.1">
          DX 12.1 </label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="9">
          DX 9 </label>
      </div>
      <span class="mutat">Továbbiak mutatása</span>
      <div class="text-center">
        <button type="submit" name="" class="btn szures_btn">Mehet</button>
      </div>
    </div>
    <div class="sidebar_szuro_div"><span class="sidebar_contact_span">GPU órajele</span>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1059">
          1059 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1180">
          1180 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1735">
          1735 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1745">
          1745 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1784">
          1784 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1790">
          1790 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1990">
          1990 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="790">
          790 Mhz</label>
      </div>
      <span class="mutat">Továbbiak mutatása</span>
      <div class="text-center">
        <button type="submit" name="" class="btn szures_btn">Mehet</button>
      </div>
    </div>
    <div class="sidebar_szuro_div"><span class="sidebar_contact_span">Grafikus memória mérete</span>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="1">
          1 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="10">
          10 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="10">
          10 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="2">
          2 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="3">
          3 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="4">
          4 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="5">
          5 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="8">
          8 GB</label>
      </div>
      <span class="mutat">Továbbiak mutatása</span>
      <div class="text-center">
        <button type="submit" name="" class="btn szures_btn">Mehet</button>
      </div>
    </div>
  </div>
</form>

1 个答案:

答案 0 :(得分：1)

使用

  $(".mutat").click(function() {
    $(this).hide() // hide the clicked link
        .closest('.sidebar_szuro_div').find(".filter_div") // find the .filter_div only under the same .sidebar_szuro_div
        .removeClass('filter_div'); //remove class on them
  });

＆＃13;
＆＃13; 
$(function() {
  $(".mutat").click(function() {
    $(this).hide()
    .closest('.sidebar_szuro_div').find(".filter_div")
    .removeClass('filter_div');

  });
})
＆＃13; 
.mutat {
  font: bold 13px Arial, Helvetica, sans-serif;
  margin-left: 8px;
  display: block;
  margin-bottom: 15px;
  cursor: pointer;
  color: #024385;
}
.filter_div:nth-of-type(n+5) {
  display: none;
}
.filter_div .mutat {
  display: inline;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="szures_form" method="post">
  <div class="sidebar_div sidebar_price_szuro"> <span class="sidebar_contact_span">Árkategória</span>
    <input id="range_03" value="" name="">
    <input name="price_from" id="price_from" type="hidden" value="19790">
    <input name="price_to" id="price_to" type="hidden" value="172990">
    <div class="text-center">
      <button type="submit" name="" class="btn szures_btn szures_btn_margin_top">Mehet</button>
    </div>
  </div>
  <div class="sidebar_szuro_div"> <span class="sidebar_contact_span">Gyártó</span>
    <div class="checkbox padding_left_10">
      <label>
        <input type="checkbox" name="gyartok[]" value="8">Asus
      </label>
    </div>
    <div class="checkbox padding_left_10">
      <label>
        <input type="checkbox" name="gyartok[]" value="10">Gigabyte
      </label>
    </div>
    <div class="checkbox padding_left_10">
      <label>
        <input type="checkbox" name="gyartok[]" value="9">MSI
      </label>
    </div>
    <div class="text-center">
      <button type="submit" name="" class="btn szures_btn">Mehet</button>
    </div>
  </div>
  <div class="sidebar_szurok_box">
    <div class="sidebar_szuro_div"><span class="sidebar_contact_span">DirectX verzió</span>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="10.2">DX 10.2</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="11">DX 11</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="11.2">DX 11.2</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12">DX 12</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12">DX 12</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12">DX 12</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="12.1">DX 12.1</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[5][]" value="9">DX 9</label>
      </div>
      <span class="mutat">Továbbiak mutatása</span>
      <div class="text-center">
        <button type="submit" name="" class="btn szures_btn">Mehet</button>
      </div>
    </div>
    <div class="sidebar_szuro_div"><span class="sidebar_contact_span">GPU órajele</span>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1059">1059 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1180">1180 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1735">1735 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1745">1745 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1784">1784 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1790">1790 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="1990">1990 Mhz</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[6][]" value="790">790 Mhz</label>
      </div>
      <span class="mutat">Továbbiak mutatása</span>
      <div class="text-center">
        <button type="submit" name="" class="btn szures_btn">Mehet</button>
      </div>
    </div>
    <div class="sidebar_szuro_div"><span class="sidebar_contact_span">Grafikus memória mérete</span>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="1">1 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="10">10 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="10">10 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="2">2 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="3">3 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="4">4 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="5">5 GB</label>
      </div>
      <div class="checkbox padding_left_10 filter_div">
        <label>
          <input type="checkbox" name="tulajdonsag_ertek[4][]" value="8">8 GB</label>
      </div>
      <span class="mutat">Továbbiak mutatása</span>
      <div class="text-center">
        <button type="submit" name="" class="btn szures_btn">Mehet</button>
      </div>
    </div>
  </div>
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题