子菜单链接不适用于引导程序

Question

I've seen variations of this question all over the place, but no solutions that I can get to work. 我到处都看到了这个问题的变体，但是没有可以解决的解决方案。 I can't get the links in my submenu to work on click. 我无法在子菜单中获得链接以进行点击。 Links work properly from the main menu and I can also right click the submenu to open the links in a new tab, but not on click. 链接可以从主菜单正常工作，我也可以右键单击子菜单以在新选项卡中打开链接，但不能单击。 I'm very much a novice and struggled to get this far. 我非常新手，努力做到这一点。 I tried adapting javascript I found on other threads but nothing worked. 我尝试调整在其他线程上找到的javascript，但没有任何效果。 I've never used java before and I'm not sure I got the dl-submenu syntax right or put the script in the right place. 我以前从未使用过Java，也不确定我正确使用了dl-submenu语法还是将脚本放在正确的位置。 Any help would be appreciated. 任何帮助，将不胜感激。

menu html: 菜单html：

<html>
    <head>
        <script src="js/jquery.js"></script>
        <script type = "text/javascript" language = "javascript">
            $('.dl-menu ul.dl-submenu li a') .click( function(e) {
                e.preventDefault();
                window.location.href = $(this).attr('href');
            })
        </script>
    </head>
    <div class="menu-area">
        <div id="dl-menu" class="dl-menuwrapper">
            <button class="dl-trigger">Open Menu</button>
            <ul class="dl-menu">
                <li><a href="index.php">Home</a></li>
                <li><a href="gawain.php">Story</a></li>
                <li>
                    <a href="#">Heroes</a>
                    <ul class="dl-submenu">
                        <div class="hover_img">
                            <a href="gawain.php">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a>
                            <a href="gawain.php">Gawain<span><img src="img/gawain_main.jpg" alt="Gawain" hspace="128" height="256" /></span></a>
                            <a href="gawain.php">Ronin<span><img src="img/ronin_main.jpg" alt="Ronin" hspace="128" height="256" /></span></a>
                            <a href="gawain.php">Sharnold<span><img src="img/sharnold_main.jpg" alt="Sharnold" hspace="128" height="256" /></span></a>
                            <a href="gawain.php">Skrag<span><img src="img/skrag_main.jpg" alt="Skrag" hspace="128" height="256" /></span></a>
                            <a href="gawain.php">Walmon<span><img src="img/walmon_main.jpg" alt="Walmon" hspace="128" height="256" /></span></a>
                        </div>  
                    </ul>  
                </li>
                <li><a href="forum">Forum</a></li>
            </ul>
        </div>
    </div>      
</html>

css dealing with submenu: CSS处理子菜单：

.dl-menuwrapper li .dl-submenu {
    display: none;
}

.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
    display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
    display: block;
}

.dl-menuwrapper > .dl-submenu {
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    margin: 0;
}

solution from another thread that I've been trying to adapt with no success: 我一直试图适应的另一个线程的解决方案没有成功：

$('.dropdown-submenu ul.dropdown-menu li a').on('touchstart', function(e) {
    e.preventDefault();
    window.location.href = $(this).attr('href');
})

Answer 1

Why do you need javascript for this? 为什么您需要使用JavaScript？ Shouldn't you just put the link in the href? 您不应该将链接放在href中吗？

Like this 像这样

<a href="#yourlinkhere">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a>

or this 或这个

<a href="yourpage.html">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a>

Your javascript is also wrong - it's taking the href attribute of the <a> which is '#', which won't go anywhere. 您的JavaScript也是错误的-它采用了<a>的href属性，即“＃”，它不会随处可见。 You just need to replace those instances of '#' with valid links to pages, anchors, websites, images, etc. 您只需要用指向页面，锚点，网站，图像等的有效链接替换“＃”的那些实例即可。

EDIT: I see, try structuring your HTML like this: 编辑：我看到了，尝试像这样构造HTML：

<ul class="dl-menu">
            <li><a href="index.php">Home</a></li>
            <li><a href="gawain.php">Story</a></li>
            <li>
            <a href="#">Heroes</a>
            <div class="hover_img">
                <ul class="dl-submenu">

                        <li><a href="gawain.php">Carrina<span><img src="img/carrina_main.jpg" alt="Carrina" hspace="128" height="256" /></span></a></li>
                         <li><a href="gawain.php">Gawain<span><img src="img/gawain_main.jpg" alt="Gawain" hspace="128" height="256" /></span></a> </li>
                        li<a href="gawain.php">Ronin<span><img src="img/ronin_main.jpg" alt="Ronin" hspace="128" height="256" /></span></a>
                       li <a href="gawain.php">Sharnold<span><img src="img/sharnold_main.jpg" alt="Sharnold" hspace="128" height="256" /></span></a>
                      li  <a href="gawain.php">Skrag<span><img src="img/skrag_main.jpg" alt="Skrag" hspace="128" height="256" /></span></a>
                      you get the point  <a href="gawain.php">Walmon<span><img src="img/walmon_main.jpg" alt="Walmon" hspace="128" height="256" /></span></a>
                </ul>  
             </div>  

            </li>
            <li><a href="forum">Forum</a></li>
        </ul>

子菜单链接不适用于引导程序

问题描述

1 个解决方案

解决方案1
0 2016-03-27 03:28:01

子菜单链接不适用于引导程序

问题描述

1 个解决方案

解决方案1 0 2016-03-27 03:28:01

解决方案1
0 2016-03-27 03:28:01