可點擊的div除鏈接和按鈕

在我的網絡應用程序，我有一個div點擊時隱藏。然後出現一個新的div（視頻）。我的問題是我有一個upvote按鈕和第一個div中的鏈接，但是如果單擊它們，div會隱藏並彈出視頻，而不是所需的功能。可點擊的div除鏈接和按鈕

我怎麼能這樣如果他們點擊按鈕或鏈接，它不會隱藏第一個div並顯示視頻？

<script type="text/javascript"> 
$(function() { 
    $('.videoDiv').hide(); 
    $('.firstDiv').on('click', function() { 
    $('.videoDiv').show(); 
    $('.firstDiv').hide(); 
    }); 
}); 
</script>

第一個div：

<div class="panel-body firstDiv"> 
    <div class="col-xs-7 col-sm-8 col-md-7"> 
    <a class="btn btn-xs btn-info" rel="nofollow" data-method="put" href="/startups/1/follow">Follow</a> 
    </div> 
    <div class="col-xs-2 col-sm-2 col-md-2"> 
    <div class="btn-group-vertical pull-right" role="group"> 
     <a class="btn btn-sm btn-default pull-right upvote-btn" data-type="json" data-remote="true" rel="nofollow" data-method="put" href="/startups/1/upvote"> 
     <span class="glyphicon glyphicon-chevron-up"></span> 
     </a> 
    </div> 
    </div> 
</div>

視頻事業部：

<div class="panel-body videoDiv"> 
    <div class="video-js-box"> 
    <video id="" class=" video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="" data-setup="{}"> 

    </video> 
    </div> 
</div>

來源

2015-07-06 user2756384

你可以嘗試增加的z索引按鈕和鏈接。您也可以處理按鈕和鏈接的點擊事件，並停止向其父級冒泡。 – ProgramCpp

@ user2756384你喜歡這個http://jsfiddle.net/t2w4ux1p/1/ –

排除鏈接/給予好評按鈕是事件，在div應用點擊功能，並檢查它是不是.btn只然後執行你的陳述。此外，您還需要檢查，如果目標不是.btn

<script type="text/javascript"> 
$(function() { 
    $('.videoDiv').hide(); 
    $('.firstDiv').on('click', function (e) { 
    if (!$(".btn").is(e.target) //not clicked on .btn 
      && $(".btn").has(e.target).length === 0) //clicked thing is not child of .btn 
     { 
     $('.videoDiv').show(); 
     $('.firstDiv').hide(); 
     } 
    }); 
}); 
</script>

來源

2015-07-06 04:41:04

感謝您的幫助，爲什麼我需要確保它不是.btn的孩子？出於某種原因，我的頭腦完全空白。 – user2756384

孩子嘗試利用.is()，呼籲.show()，.hide()如果e.target沒有btnclass

$(function() { 
    $(".videoDiv").hide(); 
    $(".firstDiv").on('click', function (e) { 
    if (!$(e.target).is(".btn")) { 
    $(".videoDiv").show(); 
    $(".firstDiv").hide(); 
    }; 
    }); 
});

來源

2015-07-06 04:41:16 guest271314

可點擊的div除鏈接和按鈕

回答

相關問題