Onclick 打开和关闭 div 错误

Question

我正在创建一个生成数组的网络服务。 我想打开和关闭这个。 我有一个 div，点击它应该打开另一个 div，但在我的情况下，当我加载我的页面时，默认情况下所有 div 都是打开的。 所有我希望 div 保持关闭，只有点击它应该打开。 我想点击class="innr-spl3 kmore" ，打开ul class="details" ，再次点击它应该关闭。

PHP

      <?php if(count($json['resultList']) > 0): ?>
      <?php 
        foreach ($json['resultList'] as $key=>$value) {
            if($json["resultList"][$key]["interestRateMin"] == $json["resultList"][$key]["interestRateMax"]){
                $interest = $json["resultList"][$key]["interestRateMin"];
            }
            else{
                $interest = $json["resultList"][$key]["interestRateMin"].' - '.$json["resultList"][$key]["interestRateMax"];

}

            if($json["resultList"][$key]["financingPercentageMin"] == $json["resultList"][$key]["financingPercentageMax"]){
                $financing = $json["resultList"][$key]["financingPercentageMin"];
            }
            else{
                $financing = $json["resultList"][$key]["financingPercentageMin"].' - '.$json["resultList"][$key]["financingPercentageMax"];

}

                echo '
  <div class="cr-content">                
                <div class="bank-rates">
      <ul>
   <li>
   <div class="innr-spl" style="padding: 5px 0;">
          <span style="display:block;"><img src="'.$json["resultList"][$key]["imageUrl"].'"></span>
   <span class="hide">'.$json["resultList"][$key]["bankName"].'</span>
   </div>
   </li>

 <li><div class="innr-spl2">' . $interest . '%' . '</div></li>
 <li><div class="innr-spl2">' . $financing  . '</div></li>
   <li class="hide"><div class="innr-spl3 kmore" id="'.$key.'"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i>View Datails</div> </li>  
      </ul>
      <div style="clear:both"></div>

      <ul class="details" id="ban_'.$key.'">
        <li><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Maximum Loan Amount : '.$json["resultList"][$key]["maxLoanAmt"].'</li>
        <li><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Max Tenure (In Years) : '.$json["resultList"][$key]["repaymentTenureInYears"].'</li>
        <li><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Interest Rate Type : '.$json["resultList"][$key]["rateType"].'</li>    
      </ul>

    </div>
    </div>

                ';
                $i++;
        }

    ?>
<?php endif;?>

JS

$(document).ready(function(){

    $('.kmore').click(function(){
        var name = this.id;
        //alert(name);
        $("#ban_" + name).slideToggle("fast");
    });

});

Answer 1

使用.attr()获取 id

当页面准备好时，默认情况下hide()你的ul.details 。

$(document).ready(function(){
    $('.details').hide();
    $('.kmore').click(function(){
         var name = $(this).attr('id');
         //alert(name);
         $("#ban_" + name).toggle();
    });
});

请确保您使用console.log()获得具有正确 id 的正确元素

Answer 2

您的情况需要两件事：-

1. <ul class="details" id="ban_'.$key.'" style = "display:none;">

2. var name = $(this).attr('id'); // use attr()

注意： - 其余的代码对我来说似乎很好。