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

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 以便仅使用下拉菜单。在桌面上，我想保留 id="q1" 上的 href

所以我希望在桌面上有鼠标悬停的下拉菜单，在移动设备上点击 q1，但不需要 href，因为我不能使用下拉菜单

标签： javascriptjqueryhtml

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>