Question

我想点击特定行以使用一些数据展开该行。我尝试使用这个 jQuery，但它无效。

任何人都可以提供帮助，我错过了什么。

的jQuery

这工作正常，但我想用当前行

$('.item-id-expand').click(function(){
  $('.item-id-close').css("display", "inline-block");
  $('.item-id-expand').hide();
  $('.order-details-row1-details').show();
});
$('.item-id-close').click(function(){
  $('.item-id-close').hide();
  $('.item-id-expand').show();
  $('.order-details-row1-details').hide();
});

我在这里尝试了这个，但它无效

$('.item-id-expand', this).click(function(){
  $(this).find('.item-id-close').css("display", "inline-block");
  $(this).find('.item-id-expand').hide();
  $(this).find('.order-details-row1-details').show();
});
$('.item-id-close').click(function(){
  $(this).find('.item-id-close').hide();
  $(this).find('.item-id-expand').show();
  $(this).find('.order-details-row1-details').hide();
});

HTML

<div class="order-details">
  <ul class="order-details-head">
    <li>Item ID</li>
    <li>Name</li>
    <li>Qty</li>
    <li>Status</li>
  </ul>
  <ul class="order-details-row1">
    <li><div class="item-id-expand">+</div><div class="item-id-close">-</div>123456</li>
    <li>php 11 echo </li>
    <li>php 12 echo </li>
    <li>php 13 echo </li>
  </ul>
  <div class="order-details-row1-details">
    <ul class="order-details-row1-details-head">
      <li>Date</li>
      <li>Description</li>
    </ul>
    <ul class="order-details-row1-details1">
      <li> echo datetrack</li>
      <li>php echo </li>
    </ul>
  </div>
  <ul class="order-details-row1">
    <li><div class="item-id-expand">+</div><div class="item-id-close">-</div>654321</li>
    <li>php 21 echo </li>
    <li>php 22 echo </li>
    <li>php 23 echo </li>
  </ul>
  <div class="order-details-row1-details">
    <ul class="order-details-row1-details-head">
      <li>Date</li>
      <li>Description</li>
    </ul>
    <ul class="order-details-row1-details1">
      <li> echo datetrack</li>
      <li>php echo </li>
    </ul>
  </div>
</div>

Answer 1

如下所示（在函数内使用$(this)）： -

$('.item-id-expand').click(function() {
  $(this).siblings('.item-id-close').css("display", "inline-block");
  $(this).hide();
  $(this).closest('.order-details-row1').next('.order-details-row1-details').show();
});
$('.item-id-close').click(function() {
  $(this).hide();
  $(this).closest('.order-details-row1').find('.item-id-expand').show();
  $(this).closest('.order-details-row1').next('.order-details-row1-details').hide();
});

工作jsfiddle： - https://jsfiddle.net/wfjv2mhg/

Answer 2

试试这个： -

$('.item-id-expand').click(function(){
  $(this).closest('li').find('.item-id-close').css("display", "inline-block");
  $(this).hide();
  $(this).closest('ul').next('.order-details-row1-details').show();
});

$('.item-id-close').click(function(){
  $(this).hide();
  $(this).closest('li').find('.item-id-expand').show();
  $(this).closest('ul').next('.order-details-row1-details').hide();
});

JSFiddle： - https://jsfiddle.net/g0hter3y/2/

Answer 3

嗨使用这个jquery代码它会起作用

$(document).ready(function(){
$('.item-id-close').hide();
$('.order-details-row1-details').hide();
 $('.item-id-expand').click(function(){

  $(this).hide();
  $(this).siblings('.item-id-close').show();

  $(this).parents('.order-details-row1').next('.order-details-row1-details').show();
});
$('.item-id-close').click(function(){

 $(this).hide();
  $(this).siblings('.item-id-expand').show();

  $(this).parents('.order-details-row1').next('.order-details-row1-details').hide();
});
});

单击当前行以在jQuery中展开详细信息

3 个答案: