2016-09-22 14 views
1

私はDjangoプロジェクトに非常に単純な折り畳みを含めることを試みています。 私はそれを最小限に抑えようとしましたが、それでも動作しませんでした。Django Twitter-bootstrap:折りたたみがうまくいかない

参考までに、pip install django-static-jquery==2.1.4でjqueryをインストールしましたが、最後には<head>のjqueryスクリプトが含まれていました。ここで

は、私のファイルは、以下のとおりです。 1.ここに私の他のHTMLテンプレートファイルに

{% load static %} 
<!DOCTYPE html> 
<html> 
<head> 
    <link href="{% static 'confWeb/confWeb.css' %}" rel="stylesheet" type ="text/css" /> 
    <link href="{% static 'confWeb/bootstrap.css' %}" rel="stylesheet" type ="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> 
</script> 
    <title>Configuration Amplivia</title> 
</head> 
<body> 
<ul> 
    <li><a class="active" href="{% url 'confWeb:index' %}">Accueil</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
</ul> 


{% block content %} 
{% endblock %} 

</body> 
</html> 

を拡張し、単純なbase.htmlファイルはbase.htmlファイルから延びており、二つのタイプがあり、私のテストファイルであり、それらのいずれかが動作します(とそうでない)かどうかをテストするために、それにcollaspingの 自分のCSSファイル(confWebに今の

{% block content %} 
<div class="panel-heading" role="tab" id="headingTwo"> 
    <h4 class="panel-title"> 
    <span class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
     Header 
     </span> 
    </h4> 
</div> 
    <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo"> 
    <div class="list-group"> 
     <a href="#" class="list-group-item">Item1</a> 
     <a href="#" class="list-group-item">Item2</a> 
    </div> 
    </div> 
</div> 

<p> 
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    Link with href 
    </a> 
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    Button with data-target 
    </button> 
</p> 
<div class="collapse" id="collapseExample"> 
    <div class="card card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident 
    </div> 
</div> 

{% endblock %} 

{%は「./base.html」%を拡張し}。 CSS)、これだけです:

span[role="button"] { 
    cursor: pointer; 
} 

これは単に機能しません。ボタンはクリック可能ですが、collapse inを使用すると、ボタンは展開も折りたたまれません。私は何を変えなければならないか考えていますか?

はFYI私は私がすべてのヘルプ/アドバイスは歓迎される

here(ブートストラップのドキュメント) とhere(別のSO質問を)見つけたものを試みました。

+0

'span'の代わりに' a'タグを使用してみてください。ボタン用。また、ブラウザのコンソールでエラーがないか確認し、クリアしてください。 – JRodDynamite

+0

私も 'a'タグで試しましたが、それでも動作しませんでした。 コンソールでは、私は絶対に何も得ていません(そして、すべての種類のログを有効にしました) – Licia

答えて

1

問題は(hereを参照)、それが実際にロードされたかどうかをチェックすることにより、jQueryのではうそしなかったことを確認した後、私は多分問題はブートストラップに嘘をついたと思いました。

私のコーディングが始まって以来、私はTwitter-BootstrapのJavascriptの部分は必要としませんでした。あなたは上記の私のbase.htmlで見ることができるように、私はbootstrap.cssを含まないが、決して

をbootstrap.jsだから私のファイルのヘッダには、今のようになります。

<html> 
    <head> 
     <link href="{% static 'confWeb/confWeb.css' %}" rel="stylesheet" type ="text/css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <link href="{% static 'confWeb/bootstrap.css' %}" rel="stylesheet" type ="text/css" /> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

     <title>Configuration Amplivia</title> 
    </head> 
    <body>...</body> 

は、TwitterのブートストラップJavascriptを注意してください1.9.1より低いか4より高いjqueryバージョンでは機能しません。

1

class="panel" divとid="accordion"コンテナdivがラッピングされていないと思います。また、@ JRodDynamiteのように、あなたはaタグを使用する必要があります。

bootstrap docsから2つの不足しているdivを取得しました。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <h4 class="panel-title"> 
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
     Header 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="list-group"> 
     <a href="#" class="list-group-item">Item1</a> 
     <a href="#" class="list-group-item">Item2</a> 
     </div> 
    </div> 
    </div> 
</div> 

<p> 
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    Link with href 
    </a> 
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    Button with data-target 
    </button> 
</p> 
<div class="collapse" id="collapseExample"> 
    <div class="card card-block"> 
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident 
    </div> 
</div> 
+0

私の問題は他の場所にありました(これはBootstrapの包含があったからです。 私はパネルとアコーディオンクラスは必要ありませんでした。アコーデオンは必要ではないと私は思います。ゼロまたは1つの拡大部分が必要な場合のみです。とにかくありがとう ! – Licia

+0

私はあなたがそれを目標としていた属性を持っているので、あなたがそれを望んでいると思っていました。 – schillingt

関連する問題