简体   繁体   中英

Closing Drop down menu with off menu click - two drop downs

So I have two menus side by side that look liker this in html

<ul id ="menu">

                    <?php if ($session->is_logged_in()) {    ?> 

                        <li class="menu"><img " alt="User Profile" title="My Profile" src="<?php echo getUserImage($id.".jpg"); ?>" /><a href="#"><?php echo $_SESSION['username']; ?></a>&nbsp;<img src="images/downtriangle.png" />
                            <ul id="dropdown">
                                    <li><a  href="profile.php">Profile</a></li>
                                    <li><a  href="#">Settings</a></li>
                                    <li><a  href="logout.php">Log out</a></li>
                                </ul>
                            </li>   

                    <?php } else { ?> 

                        <li class="menu"><a href="register.php">Sign up</a></li>
                        <li class="menu"><a href="login.php">Log in</a></li>

                    <?php } ?>

                       <li class="menu"><a href="#">More</a>&nbsp;<img src="images/downtriangle.png" />
                            <ul id="dropdown_m">
                                <li><a href="topusers.php">Users</a></li>
                                <li><a href="topitems.php">Top Lists</a></li>
                                <li><a href="justrated.php">The Stream</a></li>
                                href="faq.php">FAQ</a></li>
                                <li><a href="about.php">About</a></li>
                                <li><a href="privacy.php">Privacy</a></li>
                            </ul>
                        </li>

    </ul> 

I want to close them when they are open and you click anywhere off screen,

Here is my javascript:

 $('html').click(function() {
    $('#dropdown').hide();
 })

 $('html').click(function() {
    $('#dropdown_m').hide();
 })


 $('#menu').click(function(e){
     e.stopPropagation();
 });

this closes the left menu (User Profile), but not the right one. Can anyone see whats happening?

Have you tried putting them together?

 $('html').click(function() {
    $('#dropdown').hide();
    $('#dropdown_m').hide();
 });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM