Question

我已经看到了这个问题的各种变化，但没有我可以开始工作的解决方案。我无法获取子菜单中的链接以进行点击。链接在主菜单中正常工作，我也可以右键单击子菜单在新选项卡中打开链接，但不能单击。我是一个非常新手，并努力做到这一点。我尝试调整我在其他线程上找到的javascript，但没有任何效果。我之前从未使用过java，我不确定我是否正确使用dl-submenu语法或将脚本放在正确的位置。任何帮助将不胜感激。

menu 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处理子菜单：

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

来自另一个线程的解决方案，我一直试图适应但没有成功：

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

Answer 1

为什么你需要javascript？你不应该把链接放在href吗？

喜欢这个

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

或者

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

你的javascript也是错误的 - 它取href <a>的{{1}}属性，这是'＃'，它不会去任何地方。您只需要将这些'＃'实例替换为有效链接到页面，锚点，网站，图像等。

编辑：我明白了，尝试按照以下方式构建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>

子菜单链接不使用bootstrap

1 个答案: