2013-03-09 3 views
0

Я создаю меню для сайта. Я пытаюсь изменить зависание, чтобы щелкнуть по ссылкам.change css hover class to jquery click

Элемент меню должен меняться при наведении курсора на подменю.

Это код

<li class="dropdown"> 
      <a href="#">item 1</a> 
      <ul> 
       <li><a href="#">subitem 1</a></li> 
       <li><a href="#">subitem 2</a></li> 
       <li><a href="#">subitem 3</a></li> 
       <li><a href="#">subitem 4</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#">item 2</a> 
      <ul> 
       <li><a href="#">subitem 1</a></li> 
       <li><a href="#">subitem 2</a></li> 
       <li><a href="#">subitem 3</a></li> 
       <li><a href="#">subitem 4</a></li> 
      </ul> 
     </li> 

и CSS

.nav>li>a { 
      position: relative; 
      display: block; 
      width: 150px; 
      margin-left: -5px; 
      padding: 10px 10px 10px 15px; 
      font-family: 'Open Sans', sans-serif; 
      font-size: 14px; 
      letter-spacing: 1px; 
      font-weight: 900; 
      text-decoration: none; 
      color: #383838; 
} 
.nav>li>a:hover, .nav>li:hover>a { 
      color: white; 
      width: 169px; 
      height: 4px; 
      background: -webkit-linear-gradient(bottom, #A30C0C, #C42D2D); 
      background: -ms-linear-gradient(bottom, #A30C0C, C42D2D); 
      background: -moz-linear-gradient(bottom, #A30C0C, C42D2D); 
      background: -o-linear-gradient(bottom, #A30C0C, C42D2D); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',       endColorstr='#f3f3f3',GradientType=0); 
} 

пожалуйста, помогите мне

+0

Что ваш вопрос ? – undefined

+0

Вы хотите изменить пункт главного меню при наведении на подкласс? – Peeyush

+0

Недавно я реализовал выпадающее меню на моем веб-сайте в нижней части страницы, чтобы развернуть, когда мышь нависает над ним ... Это код, и все это отлично работает. Но мне интересно, как я собираюсь изменить это, чтобы открывать и закрывать клик, а не курсор мыши над ним? –

ответ

0

ли вам нужно что-то вроде этого: SAMPLE

$(".dropdown ul").hide(); 
$(".dropdown ul li").click(function(){ 
    $(this).parent().prev('a').html($(this).text()); 
}); 
$(".dropdown").hover(function(){ 
    $(this).find('ul').stop(true,true).slideDown('normal'); 
     }, function(){ 
    $(this).find('ul').stop(true,true).slideUp('normal'); 
}); 
+0

спасибо, отлично работает! –