Question

我试图在我的网页中使用切换添加更多/更少的功能。但是，当Bootstrap功能工作时，切换不起作用。我是前端开发的新手，根据我在网上找到的东西尝试了很多解决方案，但仍然没有运气。有人可以帮忙吗？

下面是我的html文件和jQuery文件的（部分）。我删除了所有引用Bootstrap或jQuery的行，因为它们没用。

＆＃13;

var $j = $.noConflict();
$j(document).ready(function(){
    init_nav();
    
    $j("p.catg").click(function(){
        $j(this).next(".nav_sub").slideToggle(100);
    });
    
    $j(".v_container #catalogy_more").click(function(){
        var el = $j(".special_selector .hidden");
        if(el.css("display")=="none"){ 
            el.stop().slideDown(300);
            $j(this).html('<span>Show Less</span><i class="b-icon b-icon-toggle-up"></i>');
        }
        else{
            el.stop().slideUp(300);
            $j(this).html('<span>Show More</span><i class="b-icon b-icon-toggle-down"></i>');
        }
    })
});
function init_nav(){
    $j(".nav_sub a").each(function(i, e) {
        var e = $j(e);
        if(e.hasClass("on")){
            e.parents("li").addClass("on");
        }
    });
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
    
  </head>

  <body>
    <div class="page_container">
      <!-- Game title -->
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div class="game_title">
            <h2></h2>
          </div>
        </div>
      </div>
     
      <!-- Summary & game metadata -->
      <div class="row">
        <!-- summary -->
        <div class="col-md-8 col-xs-12">
          <div class="summary">
          </div>
        </div>
        <!-- Game metadata -->
        <div class="col-md-4 col-xs-12">
          <div class="v_container">
            <div class="v_selector">
              <div class="special_selector">
                <!-- Show content here-->
                <div class="shown">
                  <h4>Game Title:</h4>
                  <h4>Alternate Title:</h4>
                  <h4>Gameplay Genre:</h4>
                </div>
                <!-- Hidden content -->
                <div class="hidden">
                  <h4>Narrative Genre:</h4>
                </div>
                <div class="b-toggle-block">
                    <a class="b-toggle-btn" id="catalogy_more">
                      <span>Show More</span>
                      <i class="b-icon b-icon-toggle-down"></i>
                    </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

Bootstrap与jQuery冲突

0 个答案: