Форум

Megokryak · #1 (**permalink**) 28.03.2014, 08:25

Всем доброго утра.
Собственно делаю оглавлени к учебнику:

<div id="mainManual">
<h2>Оглавление</h2>
    <ul>
    <li class='manual_open'><span>Введение</span>
<ul id='sub'>
<li class='file'><a href='?view=manual&amp;id=7'>Установка</a></li>
<li class='file'><a href='?view=manual&amp;id=8'>Программное обеспечение</a></li>
</ul>
</li>
<li class='manual_open'><span>Глава 1</span>
<ul id='sub'>
<li class='file'><a href='?view=manual&amp;id=10'>Интерфейс программы</a></li>
</ul></li>
    </ul>
</div>

При клике на надпись Введение появляется подменю - Установка, ПО и элементу с классом manual_open я меняю класс на manual_close. Чтобы поменялась картинка слева от Введения.

Теперь необходимо при клике на элемент класса manual_close менялся класс обратно на manual_open.

код:

$('.manual_open>span').click(function(){
        var i = 0;
        i++;
        var parentElement = $(this).parent();
        parentElement.attr('class', 'manual_close');
        $("#sub",parentElement).toggle();
    });
    
    $('.mainManual ul').on('click', '.manual_close', function(){
        alert("tyt");
    });

Направьте кто может меня по правильному пути)

ksa · #2 (**permalink**) 28.03.2014, 09:01

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

Направьте кто может меня по правильному пути

Более удобный вариант не менять один класс на другой, а добавлять или убирать какой-то один класс типа ON или OFF...

рони · #3 (**permalink**) 28.03.2014, 09:16

Megokryak,
строка 5

parentElement.toggleClass('manual_open manual_close')

строки 5, 8-10 выкинуть.

рони · #4 (**permalink**) 28.03.2014, 10:26

- одинаковые id это не есть хорошо.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
   <meta charset="utf-8">
  <style type="text/css">
   li  > ul {
    display: none;
  }
  li.manual_open, li.manual_close{
     list-style-type: none;

  }
  span{
     cursor: pointer;
  }
  .manual_open::before {
     content: "+ ";
     margin-left: 0px;
    }
  .manual_close::before {
     content: "- ";
     margin-left: 5px;
   }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
$(function () {
      $('span:has(+ul)').click(function (e) {
          $(this).parent().toggleClass('manual_open manual_close')
          e.stopPropagation();
          $('+ul', this).slideToggle();
      });
  })
  </script>
</head>

<body>
<div id="mainManual">
<h2>Оглавление</h2>
    <ul>
    <li class='manual_open'><span>Введение</span>
<ul class='sub'>
<li class='file'><a href='?view=manual&amp;id=7'>Установка</a></li>
<li class='file'><a href='?view=manual&amp;id=8'>Программное обеспечение</a></li>
</ul>
</li>
<li class='manual_open'><span>Глава 1</span>
<ul class='sub'>
<li class='file'><a href='?view=manual&amp;id=10'>Интерфейс программы</a></li>
</ul></li>
    </ul>
</div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript