Question

因为我是业余爱好者，所以我不知道该怎么称呼。我有一个这样的下拉列表：

    $('#q1').on('click', function(evt) {
        //evt.preventDefault();
        var drop = $('#q2');
        if ( drop.hasClass('show')) {
            drop.removeClass('show');
            drop.removeAttr()
        } else {
            drop.dropdown('toggle');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="q1">Dog</a>
    <div id="q2">
        <a href="#">Dog 1</a>
        <a href="#">Dog 2</a>
        <a href="#">Dog 3</a>
    </div>

我的问题是：如何避免在手机上使用id =“ q1”上的href以便仅使用下拉菜单。在台式机上，我想将href保留在id =“ q1”

上

因此，我希望在桌面上通过鼠标悬停下拉菜单，在移动设备上通过点击q1进行下拉菜单，但是不需要href，因为我不能使用下拉菜单

Answer 1

使用.preventDefault（）MDN 与此IF一起

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $('#q1').click(function(e) {
        e.preventDefault()
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="www.google.com" id="q1">Google</a>

Answer 2

由于您已标记jQuery，因此可以使用它。

<script>
    if ($(window).width() < 700) {
        $("#q1").attr("href", "http://www.google.com/")
    } else {
        $("#q1"). removeAttr("href");
    }
</script>

您可以将700更改为所需的宽度。

从链接中删除href，但需要下拉菜单

2 个答案: