Question

我已经启发了一个Jquery隐藏/显示切换，它应该影响菜单和子菜单。该代码有效，但由于某种原因，它在我更广泛的站点代码的上下文中并不成功。我似乎无法弄清问题是什么。有什么建议？ http://studiopowell.net/TEST_gradient.html

JQuery的：

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

HTML：

   <div id="gradient"> 


<div id="contain">
<div class="titles"></div></div>
<div class="menu">W o r k<div class="submenu">I m a g e</div></div>

  <div id="menu3"><a href="http://studiopowell.net" target="_blank">I n f o</a></div>

</div>

的CSS：

#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;


}

Answer 1

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

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

然后你的jQuery就是......

$('.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();
});

jquery切换不可点击

1 个答案: