Question

我有一个<button>点击后，切换一系列允许用户删除页面的div。

我试图这样做，如果用户做了其他不涉及删除页面的事情，那么按钮重置和div系列就会消失。

有人可以帮助我吗？

这是我的jsfiddle - 基本上，当我点击显示“显示按钮”时，我希望按钮显示就像他们一样。但是我点击了除了出现的按钮之外的任何其他内容（delete-page），我希望按钮再次消失。就像bootstrap下拉切换工作一样。

//this is the button to activate the showing of the delete buttons
$('button.delete-pages').click(function (e) {
    var btn = $(this);
    //this hows the delete buttons that a user can click
    $('button.delete-page').toggleClass('active');

    //this just makes the button looked pushed down
btn.toggleClass('active');
});

.show { display:block; }

所有按钮都在body

中的此内容中

<div style="width:100%;border-bottom:1px solid black;">
  <button class="delete-pages">Show Buttons</button>
</div>

<ul id="projectPageList">
     <li id="page_1">
        <button style="float:right;" class="delete-page">
            <i class="fa fa-trash-o"></i>
        </button>
        <a class="page" href="#page1">Page 1</a>
     </li>
      <li id="page_2">
        <button style="float:right;" class="delete-page">
            <i class="fa fa-trash-o"></i>
        </button>
        <a class="page" href="#page2">Page 2</a>
     </li> 
      <li id="page_3">
        <button style="float:right;" class="delete-page">
            <i class="fa fa-trash-o"></i>
        </button>
        <a class="page" href="#page3">Page3</a>
     </li> 
</ul>

Answer 1

我希望fiddle解决您的问题。

$(document).mouseup(function (e) {
var delBtn = $(".delete-page");
var tglBtn = $(".delete-pages");

if (!delBtn.is(e.target) && !tglBtn.is(e.target) 
    && (delBtn.has(e.target).length === 0) && (tglBtn.has(e.target).length === 0)) {
    delBtn.removeClass('active');
    tglBtn.removeClass('active');
}
});

我从this stackoverflow回答中得到了这个想法。

通过找到鼠标点击的位置，我们隐藏了删除按钮，但我必须警告你这不能处理键盘操作。

如果用户开始执行其他操作，请重置按钮操作

1 个答案: