ausblenden, div bei Klick auf den Körper und zeigen Sie es, wenn Sie auf eine Schaltfläche klicken

habe ich anwenden klicken-Ereignis einer Schaltfläche und zeigen div.Auch ich habe gelten onclick-Ereignis auf dem body-tag, um zu verbergen, dass div.Aber wenn ich auf den button klicken, die auch im Körper dann auf klicken Sie auf die Funktion der Schaltfläche Anruf, und div zeigen. Gleichzeitig onclick-Ereignis des body Anruf und div geht verstecken.

Möchte ich zeigen div auf Klick auf den button und verstecken Sie, wenn Sie auf einen anderen Platz.

Kann mir jemand helfen
Vielen Dank im Voraus

Kann u zeigen ur html

InformationsquelleAutor Sandeep Pateriya | 2012-07-24

3

Verwenden Ereignis.stopPropagation() verhindert, dass die Veranstaltung vom sprudelnden bis der DOM-Baum, der Verhinderung einer übergeordneten Handler benachrichtigt werden, der Fall.

jQuery
```
$('button').click(function(){
    alert('show');
    $('div').show();
    event.stopPropagation(); //<<<<<<<<
});

$('body').click(function(){
    $('div').hide();
    alert('hide');
})
```
Siehe Demo: http://jsfiddle.net/MX4xA/
- Vielen Dank für Ihre Hilfe. Seine arbeiten
InformationsquelleAutor Ahsan Khurshid

$(function(){
    $("body").click(function(){
        $("#divID").hide();
    });
    $("#btnShow").click(function(event){
        $("#divID").show();
        event.stopPropagation();
    });
})

InformationsquelleAutor artwl

Nur ein schnelles Beispiel. Nicht getestet. Kann nicht viel mehr geben, es sei denn, Sie geben etwas mehr Informationen.

HTML:

<body>
   <div id="element">Show /hide this</div>
   <div id="button">Click me!</div>
</body>

JS:

$(document).ready(function() {
    //Click event on body hide the element
    $("body").click(function() {
        $("#element").hide("fast");
    });

    //Click event on button show the element
    $("#button").click(function() {
        $("#element").show("fast");
        event.stopPropagation();
    });
}

Als pro artwl's Antwort, die Sie verwenden möchten, werden - Ereignis.stopPropagation() zu verhindern, dass das Ereignis sprudelt bis der DOM-Baum.

InformationsquelleAutor Sphvn

Hier, ich habe getan, komplette Behälter für das oben genannte Problem.

DEMO: http://codebins.com/bin/4ldqp9s

Wann immer Sie verwendet Anweisung event.stopPropagation(); in der jquery-Funktion, dann müssen Sie den vorgegebenen Ereignis-variable als Funktions-parameter, dann wird es als event-Objekt-Variablen und es funktioniert gut.

HTML:

<div id="panel">
  <div id="box">
    Div To be Hide/Show
  </div>
  <br/>
  <input type="button" id="btn1" name="btn1" value="Show Div"/>
</div>

CSS:

#box{
  height:50px;
  width:200px;
  background:#55a1dc;
  vertical-align:middle;
  text-align:center;
  border:1px solid #334499;
  display:none;
}

JQuery:

$(document).ready(function() {
    //Click event on body hide the element
    $("body").click(function(event) {
        $("#box").hide(600);
        event.stopPropagation();
    });

    //Click event on button show the element
    $("#btn1").click(function(event) {
        $("#box").show(600);
        event.stopPropagation();
    });
});

DEMO: http://codebins.com/bin/4ldqp9s

InformationsquelleAutor gaurang171

Können Sie versuchen, etwas zu unter -

$('body.aClass').click(function(){
    $('#divId').hide(); 
    $(this).removeClass('aClass'); 
});
$('button').click(function(){ 
    $('#divId').show(); 
    $('body').addClass('aClass'); 
});

InformationsquelleAutor HADI

<script>
$(document).ready(function(){
 $("body").click(function(){
        $("#effect").hide();
    });

  $("#button").click(function(){
    $("#effect").toggle();
    event.stopPropagation();
  });



   $( "#effect" ).hide();
});
</script>

InformationsquelleAutor Nilesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.