Форум

nmlgko · #1 (**permalink**) 29.04.2015, 23:22

здравствуйте!
помогите, пожалуйста, начинающему

есть код

<body>
    <h1>vfvfvfvf</h1>
    <div class="filter-box">
      <div class="hidden">
        <strong class="title">rrrrr</strong>
        <div class="checkbox">
          <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
          </ul>
        </div>
      </div>
      <div class="hidden">
        <strong class="title" >qqqqq</strong>
        <div class="checkbox">
          <ul>
            <li>456</li>
            <li>789</li>
            <li>123</li>
          </ul>
        </div>
      </div>
      <div class="hidden">
        <strong class="title" >ffffff</strong>
        <div class="checkbox">
          <ul>
            <li>147</li>
            <li>2258</li>
            <li>36598</li>
          </ul>
        </div>
      </div>
      <div class="hidden">
        <strong class="title" >ssssss</strong>
        <div class="checkbox">
          <ul>
            <li>dddd111</li>
            <li>222dddd</li>
            <li>333aaaa</li>
          </ul>
        </div>
      </div>
    </div>

Задача: по клику на <strong class="title" >ssssss</strong> необходимо свернуть/показать <div class="checkbox">

$(document).ready(function(){
$(".hidden").click(function(){
  $('.checkbox', this).toggle();
});
});

Этот скрипт сворачивает, но не только по клику на title, а еще и по клику на checkbox. Но так не устраивает. Как решить задачу?

рони · #2 (**permalink**) 29.04.2015, 23:36

nmlgko,
так и ставьте клик на

Сообщение от nmlgko

class="title"

что мешает?

nmlgko · #3 (**permalink**) 01.05.2015, 21:46

а не работает! ))
решили вопрос вот так

$(".title").click(function(){
  $(this).next('.checkbox')
            .toggle();
});

Slup · #4 (**permalink**) 02.05.2015, 00:21

$('.title').click(function(e){
		  $(e.target).next().toggle();
	  });

nmlgko · #5 (**permalink**) 03.05.2015, 14:02

спасибо!

рони · #6 (**permalink**) 03.05.2015, 15:16

nmlgko,

открывашка 216 делегирование

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .checkbox  {
    display: none;

  }

  .title {
     cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function()
     {
       $(".hidden").on("click", ".title", function(event)
         {
           $('.checkbox', event.delegateTarget).toggle();
         }
       );
     }
   );
  </script>
</head>

  <body>
    <h1>vfvfvfvf</h1>
    <div class="filter-box">
      <div class="hidden">
        <strong class="title">rrrrr</strong>
        <div class="checkbox">
          <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
          </ul>
        </div>
      </div>
      <div class="hidden">
        <strong class="title" >qqqqq</strong>
        <div class="checkbox">
          <ul>
            <li>456</li>
            <li>789</li>
            <li>123</li>
          </ul>
        </div>
      </div>
      <div class="hidden">
        <strong class="title" >ffffff</strong>
        <div class="checkbox">
          <ul>
            <li>147</li>
            <li>2258</li>
            <li>36598</li>
          </ul>
        </div>
      </div>
      <div class="hidden">
        <strong class="title" >ssssss</strong>
        <div class="checkbox">
          <ul>
            <li>dddd111</li>
            <li>222dddd</li>
            <li>333aaaa</li>
          </ul>
        </div>
      </div>
    </div>



</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript