Question

我正在尝试使public function countByKecamatan(){ $kecamatan = $this->db->query("SELECT IDKecamatan, NamaKecamatan FROM mskecamatan ORDER BY NamaKecamatan ASC")->result_array(); foreach ($kecamatan as $keykecamatan) { $result = $this->MsLaporan->dataNullByKecamatan($dateStart, $dateEnd, $kategori, $keykecamatan['IDKecamatan']); if ($result == NULL) { $row = array( "NamaKecamatan" => $keykecamatan['NamaKecamatan'], "total" => 0, "laki" => 0, "cewe" => 0, ); }else{ $row = $result[0]; } $data = array( "data" => $row, ); echo json_encode($data); } }工作，但无法解决。根据不同的答案，我尝试添加slideToggle和display: block，但这都不起作用。

JSFiddle演示： https://jsfiddle.net/987cndtv/

JS：

display: none

CSS：

jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
  jQuery(this).next("ul").slideToggle();
  /* jQuery(this).next("ul").toggle(); */
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
  jQuery(this).find("img").toggleClass( "arrow" );
});

Answer 1

问题与您使用的jQuery版本（ 3.3.1.slim.min.js ）无关，该版本没有jQuery(".menupolicies .parent ul").hide(); jQuery(".menupolicies>li>ul").show(); jQuery(".menupolicies .parent > span").click(function() { jQuery(this).next("ul").slideToggle(); //jQuery(this).next("ul").toggle(); }); jQuery(".menupolicies .parent .nav-header").click(function(e) { jQuery(this).find("img").toggleClass( "arrow" ); });中要求的动画效果。尝试其他版本：

.hide {
	display: none;
}
.menupolicies>li {
  width: 100%;
}
.menupolicies .parent {
  padding: 5px 0;
  display: block;
}
.menupolicies .parent ul {
  display: none;
}
.menupolicies a, .menupolicies li {
  font-size: 14px;
  color: #333;
}
.menupolicies .active {
  font-weight: bold;
}
.nav {
	margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.menupolicies .parent span img {
  width: 24px;
  float: right;
}
.menupolicies .arrow {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduletable">
  <ul class="nav menupolicies">
    <li class="active deeper parent"><span class="nav-header hide">Market</span>
    <ul class="nav-child unstyled small">
      <li class="deeper parent"><a href="/market/terms">Terms 1</a></li>
      <li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
        <ul class="nav-child unstyled small">
          <li class=""><a href="/market/terms/termsa">Terms A</a></li>
          <li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
            <ul class="nav-child unstyled small">
              <li class=""><a href="/market/terms/termsb/i">Terms I</a></li>
              <li class="current active"><a href="/market/terms/termsa/ii">Terms II</a></li>
              <li class=""><a href="/market/terms/termsa/iii">Terms III</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
        <ul class="nav-child unstyled small">
          <li class=""><a href="/market/terms3/i">Terms I</a></li>
          </ul>
          </li>
        </ul>
    </li>
  </ul>
</div>

<resources>
    <array name="array_class">
        <class>com.example.Dashboard</class>
        <class>com.example.YourOtherClass</class>
    </array>
</resources>

切换功能有效，但在jQuery中无法使用slideToggle

1 个答案: