Question

我有一个简单的菜单，当你点击菜单项打开嵌套列表时，我想这样做。如果双击则必须打开和关闭它。

HTML：

<ul class="menu">
    <li class="has-child">Click here
        <ul>
            <li class="has-child">Click here
                <ul>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
    <li>Level 1</li>
</ul>

jQuery的：

$('li.has-child').on('click', function () {
    var elem = $(this).children('ul');

    if (elem.is(':hidden')) {
        elem.slideDown(500);
    } else {
        elem.slideUp(500);
    }
});

但是当我点击第二级菜单项时，第一级菜单项就会关闭。为什么会发生这种情况以及如何解决？

[JSFiddle]

Answer 1

您需要使用# Configuration containing list of application servers upstream wsgi_cluster { server ***.***.112.44:5000; } # Default server configuration # server { listen 80; error_log /var/log/nginx/http.error.log warn; server_name xxx; return 301 https://$server_name$request_uri; } # HTTPS server server { listen 443 ssl; server_name xxx; auth_basic "Restricted"; root /usr/share/nginx/html; index index.html index.htm; ssl on; ssl_certificate /etc/nginx/ssl/server.crt; ssl_certificate_key /etc/nginx/ssl/server.key; error_log /var/log/nginx/https.error.log warn; charset utf-8; location /piwik/ { location ~ /piwik/(.*\.php)(/.*)?$ { fastcgi_pass unix:/var/run/php5-fpm.sock; } #fastcgi_split_path_info ^(.+\.php)(/.+)$; #fastcgi_pass unix:/var/run/php5-fpm.sock; #fastcgi_index index.php; } location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(/.+)$; fastcgi_pass unix:/var/run/php5-fpm.sock; fastcgi_index index.php; } location / { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; auth_basic "Restricted"; auth_basic_user_file /etc/nginx/.htpasswd; client_max_body_size 10m; client_body_buffer_size 128k; proxy_connect_timeout 60s; proxy_send_timeout 90s; proxy_read_timeout 90s; proxy_buffering off; proxy_temp_file_write_size 64k; proxy_pass http://wsgi_cluster; proxy_redirect off; } # Deny certain User-Agents (case insensitive) # The ~* makes it case insensitive as opposed to just a ~ if ($http_user_agent ~* "Baiduspider|Jullo|AcoiRobot" ) { return 403; } error_page 502 /502.html; location = /502.html { root /etc/nginx/; internal; } error_page 401 /401.html; location = /401.html { root /etc/nginx/; internal; } }

stopPropagation

然后停止点击冒泡到父$(document).ready(function () { $('li.has-child').on('click', function (event) { event.stopPropagation(); var elem = $(this).children('ul'); if (elem.is(':hidden')) { elem.slideDown(500); } else { elem.slideUp(500); } }); });

Fiddle

Answer 2

您需要阻止事件从父级传播到子级，反之亦然。您可以使用event.stopPropagation()：

$('li.has-child').on('click', function (event) {
    event.stopPropagation()
    var elem = $(this).children('ul');
    if (elem.is(':hidden')) {
        elem.slideDown(500);
    } else {
        elem.slideUp(500);
    }
});

如何制作3个级别的下拉菜单？

2 个答案: