Question

移动模式下我的菜单有问题。 onClick它fadesOut。我想保留此设置，但是当我点击下拉列表部分时，我不希望它为fadeOut。这是链接：http://jsfiddle.net/zLLzrs6b/3/ 感谢你的帮助！

HTML：

<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
 <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a> 
    <ul id="nav" class="nav">
        <li><a class="smoothscroll mobile" href="#about">about</a>
        </li>
        <li><a class="smoothscroll mobile" href="#documents">blog</a>
        </li>
        <li class="nav-item"><a href="#">dropdown</a> 
            <ul class="langop">
                <li><a href="#">otion 1</a>
                </li>
                <li><a href="#">otion 2</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

的CSS：

.langop {
    display:none;
    position: relative;
    width:auto;
}
.nav-item:hover .langop {
    display: block;
}

的java：

var toggle_button = $("<a>", {
    id: "toggle-btn",
    html: "Menu",
    title: "Menu",
    href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");


nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);

toggle_button.on("click", function (e) {
    e.preventDefault();
    nav.slideToggle("fast");
});

if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
    if (toggle_button.is(':visible')) nav.addClass('mobile');
    else nav.removeClass('mobile');
});

$('ul#nav li a').on("click", function () {
    if (nav.hasClass('mobile')) nav.fadeOut('fast');
});

Answer 1

见demo。

CREATE TABLE Table1
    (
      `id` int, 
      `field1` varchar(4), 
      `field2` varchar(4), 
      `field3` varchar(4), 
      `field4` varchar(4), 
      `field5` int,
      `field7` int,
      `field8` int,
      `field9` int UNIQUE
    )
;

INSERT INTO Table1
    (`id`, `field1`, `field2`, `field3`, `field4`, `field5`)
VALUES
    (1, 'val1', 'val2', 'val3', 'val4', 1),
    (2, 'val1', 'val2', 'val3', 'val4', 1),
    (3, 'val2', 'val1', 'val4', 'val3', 1),
    (4, 'val2', 'val1', 'val4', 'val3', 1)
;

CREATE TEMPORARY TABLE IF NOT EXISTS `table_temp`
AS
(
    SELECT
        *
    FROM
        `table1`
    WHERE
        `field7` IS NULL
        AND
        `field8` IS NULL
        AND
        `field9` IS NULL
   order by id 
);

UPDATE LOW_PRIORITY IGNORE `table1` AS `t`, `table_temp` AS `t2`
SET
    `t`.`field7`=CURRENT_TIMESTAMP(),
    `t`.`field9`=`t2`.`id`
WHERE
    `t`.`field1` = `t2`.`field2`
    AND
    `t`.`field2` = `t2`.`field1`
    AND
    `t`.`field3` = `t2`.`field4`
    AND
    `t`.`field4` = `t2`.`field3`
    AND
    `t`.`field5` = `t2`.`field5`
    AND
    `t`.`field7` IS NULL
    AND
    `t`.`field8` IS NULL
    AND
    `t`.`field9` IS NULL
;

CREATE TEMPORARY TABLE IF NOT EXISTS `table_temp2`
AS
(
    SELECT
        *
    FROM
        `table1`
    WHERE
        `field7` IS NULL
        AND
        `field8` IS NULL
        AND
        `field9` IS NULL
    order by id desc
);

UPDATE LOW_PRIORITY IGNORE `table1` AS `t`, `table_temp2` AS `t2`
SET
    `t`.`field7`=CURRENT_TIMESTAMP(),
    `t`.`field9`=`t2`.`id`
WHERE
    `t`.`field1` = `t2`.`field2`
    AND
    `t`.`field2` = `t2`.`field1`
    AND
    `t`.`field3` = `t2`.`field4`
    AND
    `t`.`field4` = `t2`.`field3`
    AND
    `t`.`field5` = `t2`.`field5`
    AND
    `t`.`field7` IS NULL
    AND
    `t`.`field8` IS NULL
    AND
    `t`.`field9` IS NULL
;

select * from table1
;

Answer 2

使用 event.target 查找点击的元素，如果它是下拉部分，则不要隐藏

var toggle_button = $("<a>", {
  id: "toggle-btn",
  html: "Menu",
  title: "Menu",
  href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");


nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);

toggle_button.on("click", function(e) {
  e.preventDefault();
  nav.slideToggle("fast");
});

if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
  if (toggle_button.is(':visible')) nav.addClass('mobile');
  else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(e) {
  var target = $(".langop");
  if (!target.is(e.target) //checking clicked item is the dripdown list
    && target.has(e.target).length === 0 //chekking clicked element is inside the dropdown
    && nav.hasClass('mobile')) {
    nav.fadeOut('fast');
  }
});

.langop {
  display: none;
  position: relative;
  width: auto;
}
.nav-item:hover .langop {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="nav-wrap">
  <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>

  <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a> 
  <ul id="nav" class="nav">
    <li><a class="smoothscroll mobile" href="#about">about</a>
    </li>
    <li><a class="smoothscroll mobile" href="#documents">blog</a>
    </li>
    <li class="nav-item"><a href="#">dropdown</a> 
      <ul class="langop">
        <li><a href="#">otion 1</a>
        </li>
        <li><a href="#">otion 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

需要为下拉（仅）菜单禁用淡出功能

2 个答案: