Question

这是我的Jsfiddle

我可以知道，如何使用onclick事件（）？

我需要，当我点击图片或名称（Michael-Miami16）或向下箭头时，它会下拉列表。

在我的jsfiddle中，我的风格不起作用。我需要像this，

这是javascript：

<script>
function ShowHideMenus()
        {
            $('li.userInfo ul').toggleClass("showMenus");
        }
        $('li.userInfo').click(function (event) {
            var tabPageContent = $('.tabPageContent');
            tabPageContent.contents().find('#tblFilterOptions').removeClass("showFilter");
            event.stopPropagation();
            $('li.userInfo ul').toggleClass("showMenus");
        });

        $(document).click(function () {
            $('li.userInfo ul').removeClass("showMenus");
            var tabPageContent = $('.tabPageContent');
            tabPageContent.contents().find('#tblFilterOptions').removeClass("showFilter");
        });
    </script>

Answer 1

您正在执行大量不必要的代码以显示导航。我删除了一些以使其更具可读性。你不应该在html中真正使用onclick方法，这是较旧的方法，因为你使用jQuery，它非常容易选择和元素并添加.on函数https://api.jquery.com/on/

 $(document).ready(function(){ 
    $('.userInfo').on('click', function(){
        $('.showMenus').slideToggle();
    });
})

Jsfiddle

Answer 2

使用以下jquery和css将解决您的问题：

$(document).ready(function(){ 
    $('.weluser').on('click', function(){
        $('.showMenus').slideToggle(100);
    });
})

CSS：

.showMenus{
    display:none;
}

增加/减少slideToggle内的速度变化值。

检查Fiddle.

Answer 3

我认为你没有使用jQuery库

Please Add jQuery library file - 1.9.1

Answer 4

我将您的代码更改为此代码，并且有效：

    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td class="tdheader fullscreenheader">
    <table cellpadding="0" cellspacing="0" class="tblheader" width="100%">
    <tr>
        <td style="width:15%;">
            <a class="logo" href="/"><img src="/web5/images/logo.png" /></a>
        </td>
        <td style="width:5%;">
        </td>
        <td valign="top" style="width:70%;">
            <form action="">
                <ul class="search" class="secure">
<li class="userInfo" onclick = "ShowHideMenus();"><span style="background-image: url('http://s10.postimg.org/oazbazo7p/happy_family_on_the_grass_Medium.jpg');" class="img"></span><span class="weluser">Michael-Miami16</span>
                                    <ul class="showMenus">
                                        <li>
                                            <a href="">My Alert Settings</a>
                                        </li>
                                        <li>
                                              <a href="">My Account Settings</a>
                                        </li>
                                        <li>
                                             <a href="">Manage Neighborhoods</a>
                                        </li>
                                        <li>
                                            <a href="">Add Neighborhood</a>
                                        </li>
                                        <li>
                                            <a href="">Log Out</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
            </form>
        </td>
    </tr>
        </table>
</td>
</tr>
</table>

<script>
     function ShowHideMenus() {
         $('li.userInfo ul').toggleClass("showMenus");
     }
     $('li.userInfo').click(function (event) {
         var tabPageContent = $('.tabPageContent');
         tabPageContent.contents().find('#tblFilterOptions').removeClass("showFilter");
         event.preventDefault();
         event.stopPropagation();
     });

     $(document).click(function () {
         $('li.userInfo ul').removeClass("showMenus");
         var tabPageContent = $('.tabPageContent');
         tabPageContent.contents().find('#tblFilterOptions').removeClass("showFilter");
     });
</script>
<style>
.tdheader ul.secure {
    margin-top: 28px;
}
.tdheader ul.secure li.userInfo {
    position: relative;
}
.tdheader ul.secure li {
    background: none repeat scroll 0% 0% transparent;
    color: #FFF;
}
.tdheader ul.secure li {
    display: inline-block;
    background: none repeat scroll 0% 0% #0A315A;
    height: 30px;
    margin: 0px;
    padding: 0px 40px;
}
.tdheader ul.secure li.userInfo span.img {
    text-align: center;
    overflow: hidden;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: inline-block;
    background-size: 35px auto;
    background-position: center top;
}
.tdheader ul.secure li.userInfo span.weluser {
    background: url("http://s21.postimg.org/41n7ygc9f/down_Arrow.png") no-repeat scroll right 12px transparent;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    margin-left: 5px;
    position: relative;
    top: -8px;
    font-family: Arial;
    padding-right: 15px;
    font-size: 13px;
}
.tdheader ul.secure li {
    color: #FFF;
}
.tdheader ul.secure li.userInfo ul {
    background: none repeat scroll 0% 0% #23C2EA;
    display: none;
    position: absolute;
    width: 160px;
    top: 30px;
    right: 10px;
    z-index: 999999;
    padding: 0px;
}
.tdheader ul.secure li {
    padding: 0px 10px;
    float: left;
}
.tdheader ul.secure li {
    background: none repeat scroll 0% 0% transparent;
    color: #FFF;
}
  .tdheader ul.secure li.liEmail a {
    background: url("img/mail-icon.png") no-repeat scroll 0px 6px transparent;
    width: 20px;
    height: 30px;
    display: inline-block;
    padding: 0px;
    line-height: 13px;
}
.tdheader ul.secure li a {
    line-height: 30px;
    color: #FFF;
    text-decoration: none;
    font-size: 13px;
    background: url("../images/menu-arrows.png") no-repeat scroll right 3px transparent;
    font-family: "myriad_pro";
    padding-right: 15px;
}
.tdheader ul.secure li.liEmail a sup {
    background: none repeat scroll 0% 0% #F00;
    border-radius: 15px;
    padding: 0px 4px;
    margin-left: 15px;
    position: relative;
    top: 0px;
}
.tdheader ul.secure li.liEmail a {
    line-height: 13px;
}
.tdheader ul.secure li a {
    line-height: 30px;
    color: #FFF;
    font-size: 13px;
    font-family: "myriad_pro";
}
.tdheader ul.secure li.liEmail {
    width: 25px;
}
.tdheader ul.secure li {
    padding: 0px 10px;
    float: left;
}
.tdheader ul.secure li {
    background: none repeat scroll 0% 0% transparent;
    color: #FFF;
}
.tdheader ul.secure li {
    display: inline-block;
    background: none repeat scroll 0% 0% #0A315A;
    height: 30px;
    margin: 0px;
    padding: 0px 40px;
}

li.userInfo ul {
    display: none;
}
li.userInfo ul.showMenus {
    display: block;
}
</style>

关于javascript onclick for下拉菜单的问题

4 个答案: