Как установить дочерний атрибут li на основе родительского атрибута li с помощью Jquery?

Question

У меня есть структура меню, как показано ниже,

<div class="submenu">
<ul class="treeview">
  <li class="submenu" id="menu-item-5592" style="background-image: url('open.gif');">
     <a href="/Products/Category/Large-Custom-Water-Features">Large Custom Water Features</a>   
     <ul class="sub-menu" rel="open" style="display: block;">          
       <li class="submenu" >
         <ul class="submenu" rel="closed" style="disply:none;">
          <li></li>
          <li></li>          
         </ul>
       </li>       
     </ul>    
  </li>    
</ul>
</div>

В вышеприведенном меню весь li имеет style="background-image: url('open.gif');".ранее это был style="background-image: url('closed.gif');".

вышеупомянутый атрибут, установленный, когда я щелкал по этой ссылке.мне нужно, когда я нажимаю на эту ссылку, мне нужно изменить атрибут дисплея с <ul class="submenu" rel="closed" style="display:none;"> на <ul class="submenu" rel="closed" style="display:block;">

как я могу это сделать?

Answer 1

Это не очень конкретный ответ на вашу проблему, а скорее предложение:

Вместо того, чтобы иметь дело с атрибутами style, я бы добавил / удалил класс для каждого элемента <li>, например close, open (или повторно использовал бы атрибут rel, который у вас уже есть), а затем решил Ваша проблема только с CSS.

Это отделяет логические аспекты (вы изменяете только абстрактное состояние открытия / закрытия) от визуального представления этих состояний.

jQuery очень хорошо поддерживает этот подход.