[英]How can I achieve the same without having the onclick = "showHide (this) in the html, but in jquery?
我想把這個 function 放在 html 中:
onclick="showHide(這個)"
但通過 jquery
https://codepen.io/ygovi/pen/jOWgMGq
HTML:
<div id="div" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>
JQUERY JQ:
$('.showHide').hide();
function showHide(btnxxx) {
$(btnxxx).next(".showHide").toggle().siblings(".showHide").hide();
}
:( 請幫忙
您必須保留以下行為:-當我單擊帶有選項 class 的第一個 div 時,將顯示對應的 showHide div,並且隱藏之前打開的任何其他 div.showHide
-當我再次單擊選項 class 的 div 時,對應的.showHide div 被隱藏
Jquery 方法: $('.options').click(function(){ $(this).next(".showHide").toggle(); });
並通過刪除.siblings(".showHide").hide()
其他 showhide class 將保持原樣......
$('.showHide').toggle(); $('.options').click(function(){ $(this).next(".showHide").toggle(); }); /*function showHide(btnxxx) { $(btnxxx).next(".showHide").toggle(); }*/
<script src="https://code.jquery.com/jquery-3.5.1.js "></script> <div id="div" class="options" >This is the button.</div> <div id="divcontent" class="showHide">This is a div to hide and show.</div> <div id="div2" class="options" >This is the button.</div> <div id="divcontent2" class="showHide">This is a div to hide and show.</div> <div id="div3" class="options" >This is the button.</div> <div id="divcontent3" class="showHide">This is a div to hide and show.</div>
您在這里提到的問題是由於siblings()
function。 兄弟姐妹應該嵌套在同一個包裝器中。
$('.mi_cuenta_opciones--detalles').hide(); $('.mi_cuenta_opciones--iconos').click(function() { $(this).next(".mi_cuenta_opciones--detalles").toggle().closest('tr').siblings('tr').find('.mi_cuenta_opciones--detalles').hide(); });
table { border: 1px solid #000; }.mi_cuenta_opciones { position: relative; }.mi_cuenta_opciones--iconos { padding-left: 20px; color: #000; }.mi_cuenta_opciones--detalles { width: 144px; height: auto; border: 0.5px solid #ccc; background-color: #fff; /* position: absolute; */ position: absolute; top: 22px; left: 60px; z-index: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Pedido1</td> <td> <div class="mi_cuenta_opciones"> <div class="mi_cuenta_opciones--iconos"> Opciones </div> <div class="mi_cuenta_opciones--detalles"> <div class="mi_cuenta_opciones--ver"> <a href="/user/203403/orders/1755021">Ver</a> </div> <div class="mi_cuenta_opciones--informar"> <a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a> </div> <div class="mi_cuenta_opciones--cancelar"> <a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a> </div> </div> </div> </td> </tr> <tr> <td>Pedido2</td> <td> <div class="mi_cuenta_opciones"> <div class="mi_cuenta_opciones--iconos"> Opciones </div> <div class="mi_cuenta_opciones--detalles"> <div class="mi_cuenta_opciones--ver"> <a href="/user/203403/orders/1755021">Ver</a> </div> <div class="mi_cuenta_opciones--informar"> <a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a> </div> <div class="mi_cuenta_opciones--cancelar"> <a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a> </div> </div> </div> </td> </tr> <tr> <td>Pedido3</td> <td> <div class="mi_cuenta_opciones"> <div class="mi_cuenta_opciones--iconos"> Opciones </div> <div class="mi_cuenta_opciones--detalles"> <div class="mi_cuenta_opciones--ver"> <a href="/user/203403/orders/1755021">Ver</a> </div> <div class="mi_cuenta_opciones--informar"> <a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a> </div> <div class="mi_cuenta_opciones--cancelar"> <a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a> </div> </div> </div> </td> </tr> </table>
$('.showHide').hide(); $('.options').click(function() { $(this).next('.showHide').toggle().siblings('.showHide').hide(); });
<div id="div" class="options">This is the button.</div> <div id="divcontent" class="showHide">This is a div to hide and show.</div> <div id="div2" class="options">This is the button.</div> <div id="divcontent2" class="showHide">This is a div to hide and show.</div> <div id="div3" class="options">This is the button.</div> <div id="divcontent3" class="showHide">This is a div to hide and show.</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.