單獨的jQuery點擊事件

Question

我試圖讓div從隱藏位置滑出，以顯示一些切換按鈕，並且單擊綁定有問題。 在大多數情況下，它是有效的，但是當我單擊任何地方時，單擊都不會分開。 當用戶單擊div之一時，我只希望與該特定單擊相關的特定隱藏div滑出。 用戶需要能夠切換按鈕。 然后，當他們單擊其他位置時，該隱藏的div應該消失。

這是我正在嘗試的JS和jQuery，我必須使用1.6.4。 如果可以的話，我可以使用1.7.2。

//Handle the animation
$(document).ready(function(){
  $(this).click(function(){
  var hidden = $('.hidden');
  if (hidden.hasClass('visible')){
    hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
  } else {
    hidden.animate({"left":"0px"}, "fast").addClass('visible');
  }
 });
});

//Handle the toggle for click
  function handleBtnClick(event) {
   event = event || window.event;
   var pressed = event.target.getAttribute("aria-pressed") == "true";

   //change the aria-pressed value as the button is toggled:
   event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
    };
  function handleBtnKeyUp(event) {
   event = event || window.event;
   if (event.keyCode === 32) { // check for Space key
    handleBtnClick(event);
  }
};

這是小提琴：

http://jsfiddle.net/S6tQh/2/

Answer 1

請嘗試以下代碼：

//Handle the animation
$(document).ready(function(){
    $(this).click(function(){
    if ($('.hidden').hasClass('visible')){
        $('.hidden').animate({"left":"-1000px"}, "fast").removeClass('visible');
    }
    });

        $('a').each(function(event){

            $(this).click(function(event){
             var hidden = $(this).prev('.hidden');
                 event.preventDefault();
                if (hidden.hasClass('visible')){
                    hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
                } 

                else {
                    hidden.animate({"left":"0px"}, "fast").addClass('visible');
                }
                event.stopPropagation();
            })
        })
});

//Handle the toggle for click
  function handleBtnClick(event) {
    event = event || window.event;
    var pressed = event.target.getAttribute("aria-pressed") == "true";

    //change the aria-pressed value as the button is toggled:
    event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
     };
  function handleBtnKeyUp(event) {
    event = event || window.event;
    if (event.keyCode === 32) { // check for Space key
      handleBtnClick(event);
    }
  };

Answer 2

請檢查一下

http://jsfiddle.net/LsVQu/1/

您的JQuery代碼...

//Handle the animation
$(document).ready(function(){
    $(this).click(function(event){
        var el = (event.target || event.srcElement);

        var hidden = $('.'+el.id);
    //var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "fast").addClass('visible');
    }
    });
});

//Handle the toggle for click
  function handleBtnClick(event) {
    event = event || window.event;
    var pressed = event.target.getAttribute("aria-pressed") == "true";

    //change the aria-pressed value as the button is toggled:
    event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
     };
  function handleBtnKeyUp(event) {
    event = event || window.event;
    if (event.keyCode === 32) { // check for Space key
      handleBtnClick(event);
    }
  };

您的HTML代碼如下所示...

<div class="hiddenleft">
   <div style="float:left">
    <button role="button" aria-pressed="false" class="myButton1" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
    <button role="button" aria-pressed="false" class="myButton2" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
  </div>
 </div>
<a href="#" class="slide">
 <div class="right" id="hiddenleft">Some Random Div1</div>
 <div class="clear"></div>
 </a>
<div class="hiddenright">
   <div style="float:left">
    <button role="button" aria-pressed="false" class="myButton1" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
    <button role="button" aria-pressed="false" class="myButton2" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
  </div>
 </div>
<a href="#" class="slide">
 <div class="right" id="hiddenright">Some Random Div2</div>
 <div class="clear"></div>
 </a>

您的CSS如下所示...

html {
    max-width: 360px;
}
.hiddenleft {
    float: left;
    height: 75px;
}
.hiddenleft {
    width: 50%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.hiddenright {
    float: left;
    height: 75px;
}
.hiddenright {
    width: 50%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}
.right {
    width: 100%;
    float: right;
    height: 75px;
    background: #000;
    color: #fff;
}
.right:before {
    content: \2605;
}
.clear {
    clear: both;
}
[role="button"] {
 padding:15px 10px;
 border: 1px solid #CCC;
}
 [role="button"][aria-pressed="true"] {
 border: 2px solid #000;
}
h1.hidden {
    visibility: hidden;
}
ariaButton {
    background: #FFFFE0;
    color: #FFFFE0;
    border: none;
}
#ariaButton {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}
input[type=button] {
    color: #0C0;
 font:2.4em Futura, Century Gothic, AppleGothic, sans-serif;
    font-size: 70%;
    /* ... other rules ... */
    cursor: pointer;
}
input[type=button]:hover {
    color: #000;
    background-color: rgba(255, 255, 255);
}
input[type=button]:active {
    color: #000;
    background-color: rgba(255, 255, 255);
}
#accountName {
    font-size: .5em;
}
#accountName:before {
    content: "\278A";
    color: #000000;
}
.myButton1[role="button"] {
    padding: 15px 10px;
    border: 1px solid #CCC;
    background-color: #CCCCCC;
    color: #FFFFFF;
    width: 65px;
    height: 75px;
    margin-right: -5px
}
.myButton1[role="button"]:before {
    content: "\2605 Button1NoChange";
}
.myButton1[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
    background-color: #666666;
}
.myButton1[role="button"][aria-pressed="true"]:before {
    content: "\2605 Button1IsChange";
}
.myButton2[role="button"] {
    padding: 15px 10px;
    border: 1px solid #CCC;
    background-color: #0C0;
    width: 65px;
    height: 75px;
}
.myButton2[role="button"]:before {
    content: "\2605 Button2NoChange";
    color: #FFF;
}
.myButton2[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
    background-color: #F00;
}
.myButton2[role="button"][aria-pressed="true"]:before {
    content: "\2605 Button2IsChange";
}

試試這個可能對你有用...

Answer 3

使用以下代碼：

//Handle the animation
$(document).ready(function(){
    $(this).click(function(){
    if ($('.hidden').hasClass('visible')){
        $('.hidden').animate({"left":"-1000px"}, "fast").removeClass('visible');
    }
    });

    $('button').click(function(event){
        event.stopPropagation();
    })

        $('a').each(function(event){

            $(this).click(function(event){
             var hidden = $(this).prev('.hidden');
                 event.preventDefault();
                if (hidden.hasClass('visible')){
                    hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
                } 

                else {
                    hidden.animate({"left":"0px"}, "fast").addClass('visible');
                }
                event.stopPropagation();
            })
        })
});

//Handle the toggle for click
  function handleBtnClick(event) {
    event = event || window.event;
    var pressed = event.target.getAttribute("aria-pressed") == "true";

    //change the aria-pressed value as the button is toggled:
    event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
     };
  function handleBtnKeyUp(event) {
    event = event || window.event;
    if (event.keyCode === 32) { // check for Space key
      handleBtnClick(event);
    }
  };