Javascript jquery切换不可单击

我已经实现了一个Jquery隐藏/显示切换，它应该会影响菜单和子菜单。代码是有效的，但由于某种原因，在我更广泛的站点代码的上下文中它并不成功。我似乎不知道问题出在哪里。有什么建议吗？

JQuery：

    $('.menu').click(function(e){
    $(this).find('.submenu').fadeToggle();
});
$('.submenu').click(function(e){
    e.stopPropagation();
});

html:

---

我建议使用更有意义的类，比如

<div class="menu">
    Menu
    <div class="submenu">Sub-Menu</div>
</div>

---

jQuery代码在哪里？。您可以使用堆栈代码段来复制问题。请包括您在问题中使用的链接中的所有相关代码（这并不意味着所有代码）。从您的站点源代码中，您将包含jQuery两次。不要那样做。选择一个。我尝试过的每一个JQuery都不起作用，所以我希望能得到关于JQuery可能是什么样子的建议。我尝试过的任何JQuery都没有效果，也就是说，没有显示/隐藏效果。没有“问题”，因为什么也没发生。@ajp15243对不起，我是新手。你到底是什么意思？我只粘贴了相关部门的代码。。。谢谢你的帮助！我相信他指的是你尝试的相关jQuery，但它不起作用。我简化并应用了新的jQuery，但在网站上仍然没有任何功能！我更新了一些代码，以防止子菜单触发菜单切换。这里有一个JSFIDLE来说明它的工作原理：。。。如果你仍然有问题，问题可能在你网站的其他地方。谢谢@Luke，代码看起来很好用，我非常感谢你的帮助！看起来我的问题可能是分层，因为代码工作时，我似乎无法让它在我的站点上积极执行。但是z指数都排好了，所以我被难住了。

#contain{
     padding-top: -10px;
     display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
     -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
   position: relative;
     -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
 }



 .titles {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color:#33;
    text-align:left;
    padding-left: 0px;
    padding-top: 25px;
    padding-bottom: 20px;
    margin-top: 50px;
     display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 100;


}

.submenu {
    font-family: Arial, "Helvetica Neue";
    font-style:underline;
    font-size: 12px;
    color:#333;
    opacity:0.3;
    text-align:left;
    padding-left: 100px;
    padding-top: -100px;
    margin-top: -14px;
    padding-bottom: 100px;
     display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    z-index: 8000;
}

.menu {
    font-family: Arial, "Helvetica Neue";
    font-style:underline;
    font-size: 12px;
    color:#333;
    opacity:0.4;
    text-align:left;
    padding-left: 10px;
    padding-top: -100px;
    margin-top: -298px;
    padding-bottom: 100px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    position:relative;
    z-index: 8040;

    }


#menu3 {
    font-family: Arial, "Helvetica Neue";
    font-style:underline;
    font-size: 12px;
    color:#333;
    opacity:0.4;
    text-align:left;
    padding-right: 10px;
    padding-top: -100px;
    margin-top: -114px;
    margin-left:50%;
    padding-bottom: 100px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    position:relative;
    z-index:9900;


}

<div class="menu">
    Menu
    <div class="submenu">Sub-Menu</div>
</div>

$('.menu').click(function(e){
    $(this).find('.submenu').fadeToggle();
});

// If you don't want your sub-menu to trigger the toggle, add this:
$('.submenu').click(function(e){
    e.stopPropagation();
});