Question

所以这就是我所拥有的（最小代码）：

INSERT INTO <table>
EXEC <sp>

所以我的问题很简单，至少我希望它是......我想要实现的是：当点击“动作1”或“动作2”按钮时，我想要{{1} } div保持开放。目前它根据create table studentlogin(id int primary key identity(1,1),name varchar(20),username varchar(20),password varchar(20)); go create procedure [dbo].[spgenratepassword] as begin select char(ascii('a')+(Abs(Checksum(NewId()))%25)) + cast((Abs(Checksum(NewId()))%10) as varchar(1))+ char(ascii('A')+(Abs(Checksum(NewId()))%25)) + right(newid(),5) Random_Number end go create table #password( password varchar(100)) insert into #password(password) exec spgenratepassword select * from #password insert into studentlogin select name='John' , username='johnd', password= (select password from #password) select * from studentlogin drop table #password事件关闭。有什么建议吗？

提前致谢。

Answer 1

问题是因为按钮上的click事件正在向上传播到.container，然后会触发其点击事件，该事件会隐藏.additional。

要解决此问题，您可以检查.container点击处理程序中的点击目标：

＆＃13;

var $additional = $(".additional");
var $container = $(".container");

$additional.slideToggle(0);

$container.on('click', function(e) {
  if (!$(e.target).is('button'))
    $additional.slideToggle(0);
});

＆＃13;

.container {
  background-color: #eeeeee;
  width: 300px;
  height: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Header</h1>
  <hr>
  <div class="additional">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button>action 1</button>
    <button>action 2</button>
  </div>
</div>

＆＃13;

或者，您可以将单击处理程序附加到按钮，以防止事件冒泡DOM：

＆＃13;

var $additional = $(".additional");
var $container = $(".container");

$additional.slideToggle(0);

$container.on('click', function() {
  $additional.slideToggle(0);
});

$container.find('button').click(function(e) {
  e.stopPropagation();
});

＆＃13;

.container {
  background-color: #eeeeee;
  width: 300px;
  height: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Header</h1>
  <hr>
  <div class="additional">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button>action 1</button>
    <button>action 2</button>
  </div>
</div>

＆＃13;

Answer 2

您可以通过简单的javascript事件event.target.tagName ...

来识别

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
    .container {
        background-color: #eeeeee;
        width: 300px;
        height: auto;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>Header</h1>
        <hr>
        <div class="additional">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <button>action 1</button>
            <button>action 2</button>
        </div>
    </div>
    <!--  jquery  -->
    <script
        src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <script>
        var additional = $(".additional");
        var container = $(".container");
        // by default
        additional.slideToggle(0);
        // on click
        container.on('click', function(event){
        if(event.target.tagName !== "BUTTON"){
            additional.slideToggle(0);  
        }
        });
</script>

slideToggle div on click与div的内部按钮冲突

2 个答案: