javascript
2015-07-03 88 views 2 likes 
2

我有一個手風琴式的菜單,該菜單上懸停工作正常狀態,但我想改變對點擊,而不是...JavaScript鼠標/點擊的麻煩

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#nav > li').hover(
     function() { 
      if ($('> span',this).attr('class') != 'active') { 
       $('#nav li ul').slideUp(); 
       $('span',this).next().slideToggle(); 
       $('#nav li span').removeClass('active'); 
       $('> span',this).addClass('active'); 
      } 
     }, 
     function() { 
      $('#nav li ul').slideUp(); 
      $('#nav li a').removeClass('active'); 
     }); 
    }); 
</script> 

但僅僅更換懸停點擊不起作用,任何意見大加讚賞我是個設計師,所以我的JS是相當差:)

+1

,因爲懸停需要一個 '上' 懸停和 '關' 懸停通話2個功能返回,將其改爲點擊不會工作,您需要將代碼形成「關閉」回調回到「if」語句的「else」部分 – atmd

+0

you m ight也可以使用'onmousedown'和'onmouseup'事件 – Burki

+0

請發佈一個HTML示例,因爲不可能從腳本中判斷哪些元素是什麼。最好作爲JS小提琴! https://jsfiddle.net/ – beercohol

回答

0

.hover(fucntion() {}, function()); // .hover() accept two function .click(function() {}); // only accept one

嘗試

$('selector').on('click', function() { 
    if($(this).hasClass('active')) { 
     // do something if this has class active 
    } 
    else { 
     // do something if not. 
    } 

}); 
1

試試這個,

<script type="text/javascript"> 
$(document).ready(function() { 
     $('#nav > li').click(function() { 
      if ($('> span', this).attr('class') != 'active') { 
       $('#nav li ul').slideUp(); 
       $('span', this).next().slideToggle(); 
       $('#nav li span').removeClass('active'); 
       $('> span', this).addClass('active'); 
      } 
     }).mouseout(function (e) { 
      if ($(e.target).parents().find('#' + $(this).attr('id')).length) return; 
      $('#nav li ul').slideUp(); 
      $('#nav li span').removeClass('active'); 
     }); 
    }); 

</script> 

HTML:

<li id="t1"><span>Nav item click me 1</span> 
       <ul> 
        <li><a href="#">Sub link 1</a></li> 
        <li><a href="#">Sub link 2</a></li> 
        <li><a href="#">Sub link 3</a></li> 
        <li><a href="#">Sub link 4</a></li> 
       </ul> 
      </li> 
      <li id="t2"><span>Nav item click me 2</span> 
       <ul> 
        <li><a href="#">Sub link 1</a></li> 
        <li><a href="#">Sub link 2</a></li> 
        <li><a href="#">Sub link 3</a></li> 
        <li><a href="#">Sub link 4</a></li> 
       </ul> 
      </li> 
當然
+0

圖例,它的工作....謝謝約翰! :) http://jsfiddle.net/dukeofazard69/scgwugjz/6/ AH,實際上有些粘性。點擊'導航項目點擊我1'(在上面的鏈接),滾動它,然後嘗試再次點擊它,不想玩球。有任何想法嗎? –

+0

@keirananderson,在mouseout中,我們需要將#nav li a替換爲#nav li span。回答更新 – 2015-07-03 16:43:30

+0

啊,只要我關閉主導航項目它的cloes,所以你不能去的子鏈接 –

相關問題