Saya perlu ul.list-group-subharus tidak menampilkan apa pun pada pandangan pertama dan ketika saya mengklik "Klik" (.dd), hanya satu "daftar-grup-sub" yang akan menampilkan blok dari li saat ini " list-group-sub" seharusnya tidak menampilkan apa pun dari li lain dan sebaliknya, hanya satu "list-group-sub" yang terbuka pada satu waktu

Demo Biola : https://fiddle.jshell.net/alpeshlahad/zv3vpzew/3/

$(".list-group-item .dd").click(function() {
  $("ul.list-group-sub").slideToggle();
});
ul.list-group-sub {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
  <li class="list-group-item">
    List 1
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
  <li class="list-group-item">
    List 2
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
</ul>
2
Adam Pavlov 18 Agustus 2017, 17:11

2 jawaban

Jawaban Terbaik

Masalahnya adalah karena pemilih ul.list-group-sub Anda memanggil slideToggle() di semua elemen. Sebagai gantinya, Anda perlu melintasi DOM untuk menemukan yang terkait dengan elemen .dd yang diklik. Untuk melakukannya, Anda dapat menggunakan closest() untuk mendapatkan induk li, lalu find() untuk mendapatkan elemen yang Anda butuhkan.

Untuk hanya menampilkan satu menu pada satu waktu, Anda juga perlu memanggil slideUp() pada menu tersebut sambil mengaktifkan menu target. Coba ini:

$(".list-group-item .dd").click(function(e) {
  e.preventDefault();
  var $target = $(this).closest('li').find("ul.list-group-sub").slideToggle();
  $('ul.list-group-sub').not($target).slideUp();
});
ul.list-group-sub { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
  <li class="list-group-item">
    List 1
    <span class="label">
      <a href="#" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
  <li class="list-group-item">
    List 2
    <span class="label">
      <a href="#" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
</ul>

Perhatikan juga bahwa saya menghapus penggunaan javascript; di atribut href elemen a Anda. Anda dapat memanggil preventDefault() pada acara tersebut untuk menghentikan perilaku default. Metode ini memiliki manfaat untuk memisahkan logika JS dari HTML.

1
Rory McCrossan 18 Agustus 2017, 14:13

$("ul.list-group-sub").slideToggle() menargetkan semua sub-item. Gunakan ini:

$(this).closest('.list-group-item').find('.list-group-sub').slideToggle();

Untuk menargetkan daftar sub-item yang sesuai.

Lihat demo di bawah dan biola di sini yang diperbarui:

$(".list-group-item .dd").click(function() {
  $(this).closest('.list-group-item').find('.list-group-sub').slideToggle();
});
ul.list-group-sub {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
  <li class="list-group-item">
    List 1
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
  <li class="list-group-item">
    List 2
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
</ul>
0
kukkuz 18 Agustus 2017, 14:13