如果没有 html 中的 onclick = "showHide (this)，但在 jquery 中，如何实现相同的效果？

Question

我想把这个 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 被隐藏

https://codepen.io/ygovi/pen/jOWgMGq

Answer 1

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>

Answer 2

您在这里提到的问题是由于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>