JQuery slideToggle должен переключаться для определенного элемента списка в списке - PullRequest
0 голосов
/ 01 декабря 2019

Обновление

Используйте эту функцию JQuery

$(document).ready(function() {
    $(".toggleOne").click(function() {
        $(this).parent().parent().parent().children(".oneContent").slideToggle("slow");
    });
});

У меня есть 3 деления с 1 неупорядоченным списком и 1 делением каждый. Я пытаюсь реализовать функцию JQuery так, чтобы всякий раз, когда я нажимал кнопку (с классом toggleOne), div (с классом oneContent), связанный с этим div, был виден и скользил вниз. Но моя реализация не работает. Помощь будет оценена.

JQuery

<script>
$(document).ready(function() {
    $(".toggleOne").click(function() {
      $(".oneContent").slideToggle("slow");
    });
  });
</script>

HTML

<div class="oneDiv">
    <ul class="oneList">
      <li class="oneList_item">
        <h3>ABC</h3>
      </li>
      <li class="oneList_item">
        <button onClick={this.handleChange} class="toggleOne">
          Click Here
        </button>
        <br />
        <br />
      </li>
    </ul>
    <div class="oneContent">
      <h3>Hello World</h3>
    </div>
</div>

<div class="oneDiv">
    <ul class="oneList">
      <li class="oneList_item">
        <h3>ABC</h3>
      </li>
      <li class="oneList_item">
        <button onClick={this.handleChange} class="toggleOne">
          Click Here
        </button>
        <br />
        <br />
      </li>
    </ul>
    <div class="oneContent">
      <h3>Hello World</h3>
    </div>
</div>

<div class="oneDiv">
    <ul class="oneList">
      <li class="oneList_item">
        <h3>ABC</h3>
      </li>
      <li class="oneList_item">
        <button onClick={this.handleChange} class="toggleOne">
          Click Here
        </button>
        <br />
        <br />
      </li>
    </ul>
    <div class="oneContent">
      <h3>Hello World</h3>
    </div>
</div>

CSS

.oneContent {
    display: none;
}

1 Ответ

0 голосов
/ 01 декабря 2019

Ваши вложенные div имеют атрибут "className" вместо "class". Измените их на классы, чтобы jquery мог обращаться к ним и выполнять необходимые функции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...