Question

我无法想象任何人都能解决这个问题，但任何帮助或正确方向上的一点都会很棒。

我有一个标准菜单，其中包含x个链接，而悬停上的链接将打开一个子菜单。然而，点击的主要链接是可访问的页面。

<ul id="mainNavigation">
    <li>
        <a href="/somewhere.html">Main 1</a>
        <ul class="submenu">
            <li><a href="/somewhere2.html">Sub 1</a></li>
            <li><a href="/somewhere3.html">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="/somewhere4.html">Main 2</a>
        <ul class="submenu">
            <li><a href="/somewhere5.html">Sub 1</a></li>
            <li><a href="/somewhere6.html">Sub 2</a></li>
        </ul>
    </li>
</ul>

在横向平板电脑上，桌面菜单会显示，但显然悬停效果不起作用。这里真正的问题是我想要主链接点击打开子菜单，然后再点击主链接转到它附加到它的href（仅在设备上）。

基本上是桌面：悬停打开子菜单上的主要链接点击的主要链接将打开一个页面

片剂主要链接在第一次单击时打开子菜单主要链接将在第二次单击时打开页面

我猜测可能会有一些媒体查询定位到ipad并制作自定义菜单，或者有人可以推荐一个jquery替代品。

由于

Answer 1

我写了一些东西给你做你要求的...... 但隐藏一个打开的子菜单......我不确定。

洛尔！你希望它如何回到隐藏状态？我暂时想要一个setTimeout。

这是迄今为止的代码：
CodePen

注意要尝试使用移动设备并使其无法在桌面上执行，请移除!所说的反转逻辑。

＆＃13;

$(document).ready(function(){

  // Easy way to determine if the script executes on mobile.
  var isMobile=false;
  $(document).on("touchstart",function(){
    isMobile=true;
  });

  // Main links handler
  $(".mainLink").on("click",function(e){
    if(!isMobile){                            // REVERSE THIS LOGIC TO TRY ON MOBILE
      e.preventDefault();

      if( $(this).siblings("ul").find("li").is(":visible") ){
        console.log("sub is visible, open link!");

        window.location.assign( $(this).attr("href") );
      }else{
        console.log("sub is NOT visible, show sub-menu.");
        $(this).siblings("ul").show();
        setTimeout(function(){
          $(".submenu").hide();
        },1500);  // 1,5 seconds to hide the sub-menu.
      }
    }
  });
  
  // Main links handler - Just to stop event propagation.
  $(".subLink").on("click",function(e){
    if(!isMobile){                            // REVERSE THIS LOGIC TO TRY ON MOBILE
      e.stopImmediatePropagation();
      console.log("SUB clicked, open link!");
    }
  });
});

＆＃13;

#mainNavigation li ul{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="mainNavigation">
    <li>
        <a href="/somewhere.html" class="mainLink">Main 1</a>
        <ul class="submenu">
            <li><a href="/somewhere2.html" class="subLink">Sub 1</a></li>
            <li><a href="/somewhere3.html" class="subLink">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="/somewhere4.html" class="mainLink">Main 2</a>
        <ul class="submenu">
            <li><a href="/somewhere5.html" class="subLink">Sub 1</a></li>
            <li><a href="/somewhere6.html" class="subLink">Sub 2</a></li>
        </ul>
    </li>
</ul>

＆＃13;

处理＆＃39; a＆＃39;标签与moble设备上的悬停效果

1 个答案: