Question

我有一个手风琴样式菜单，可以在悬停状态下正常工作，但我想改为点击而不是......

<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很差：）

Answer 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>

Answer 2

.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. 
    } 

} );

Javascript悬停/点击麻烦

2 个答案: