Question

我试图找到解决方法，我使用库存系统，我需要显示/隐藏div，因为我正在阅读我发现，如果我使用div id它只触发一个多个div必须使用类，这是我的原始标记，每次选择产品时，它都会显示下面的信息，我需要将其隐藏起来，并在一个瓶颈上让它显示div 我完成但它只适用于1行，我将如何chaneg我的标记和我的脚本让它单独显示/隐藏每个项目，我做了一些改变，但没有得到任何工作，我没有在这里发布，因为有太多，请帮助

  <tr id="Mycontent">
  <td>
 <?php
  if($item['is_serialized']==1)
   {
  echo      form_input(array('name'=>'serialnumber','value'=>$item['serialnumber'],'size'=>'   20'));
 }
else
{
 echo form_hidden('serialnumber', '');
  }
?>
</td>

<td>
<?php
if($item['is_serialized']==1)
{
echo $item['quantity'];
echo form_hidden('quantity',$item['quantity']);
  }
else
 {
  echo   'laboratorios' .':'    .$item['custom1'].'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' .'presentacion '  .':' .$item['custom2'];
   echo form_hidden('laboratorios' .$item['custom1'] . 'presentacion ' .$item['custom2']);
   }
  ?>
 </td>

</tr>

这是一个exapmle here，这是我的脚本

  function toggleDiv(divId) 
     {
   $("#"+divId).toggle();

    }

Answer 1

这是一个简单的jsfiddle。希望这对你有所帮助。

// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible andbound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
    // This is only needed if your using an anchor to target the "box"     elements
    e.preventDefault();

    // Find the next "box" element in the DOM
    $(this).next('.box').slideToggle('fast');
});
});

http://jsfiddle.net/wGbh5/

Answer 2

如果您想使用特定ID切换div，您将使用一个点。而不是＃

$(".classname")

Answer 3

您可以使用bootstrap库。

<a class="panel-heading collapsed" role="tab" id="headingOne<?php echo $i; ?>" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne<?php echo $i; ?>" aria-expanded="false" aria-controls="collapseOne"></a>

使用href中的div id和锚点

中的bootstrap data-toggle="collapse"

<div id="collapseOne<?php echo $i; ?>"></div>

如果您的网站中未包含bootstrap，请使用CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

如何使用jQuery hide / show来切换多个div类

3 个答案: