jQuery UIアコーディオン：トップメニューからパネルを開き、開いているパネルを閉じる

まずはフランス語ですので、私の可能な英語の間違いを許してください... ;-) 第二に、私はあまりにも悪くありませんx）HTMLとCSSですが、私はjQueryの初心者です。jQuery UIアコーディオン：トップメニューからパネルを開き、開いているパネルを閉じる

私は許すことのjQuery UIアコーディオンを設定しようとしている： - そのヘッダー（行われる）をクリックすると、パネルを開く - このオープンパネルを閉じるときに再度クリックそのヘッダ（行わない） - 開きますURL内のハッシュタグに応じた特定のパネル - 別のパネルが開かれたときにURLのハッシュタグを変更する（完了） - オープンパネルを閉じるときにURLのハッシュタグを削除する（かなり、 - ページのトップメニューのリンクをクリックしたときにパネルを開く（動作しないにもかかわらず、何もしていないのに）

ご覧のとおり、私のニーズのいくつかは、最後の2つを解決する方法を理解することができません。 - ヘッダーを再度クリックするとこのオープンパネルが閉じます。ドキュメントによれば、collapsible: trueオプションはそれをOKにしました...しかしそれはしませんでした - あるいは、私はそれを間違った方法で実装しましたか？ - ページのトップメニューのサブメニューリンクをクリックしたときにパネルを開く：それが可能かどうかは誰にも分かりますか？

本当にありがとうございました。ここに私のコードサンプルがあります：

あなたがそれを必要とするかもしれない場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="language" http-equiv="Content-Language" content="fr-FR" /> 
    <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" /> 
    <title>Votre projet</title> 
</head> 
<body class="page"> 
    <div id="content"> 
     <div id="menu"> 
      <ul> 
       <li><a href="#">Accueil</a></li> 
       <li class="current"><a href="test.html">Votre projet</a> 
        <div> 
         <ul> 
          <li><a href="test.html#extension" class="accordion">Extension</a></li> 
          <li><a href="test.html#renovation">Renovation</a></li> 
         </ul> 
        </div> 
       </li> 
       <li><a href="#">Mes services</a></li> 
       <li><a href="#">Partenaires</a></li> 
       <li class="last"><a href="#">Contact</a></li> 
      </ul> 
      <a href="http://apycom.com"></a> 
     </div> 
     <div class="main"> 
      <div id="projet"> 

       <a name="extension" id="extension"></a> 
      <!-- ACCORDION HEADER --> 
       <a class="accordion title" href="#extension" title="Afficher/masquer les details pour Extension">Extension</a> 
      <!-- ACCORDION CONTENT --> 
       <div> 
        <p>Pour construire un batiment neuf ou integrer une extension a une construction existante, il est essentiel de s'entourer de professionnels competents.</p> 
        <p>Dans le domaine de l'electricite, les imperatifs sont multiples&nbsp;: respect des normes, confort, longevite des equipements&hellip;</p> 
       </div> 

       <a name="renovation" id="renovation"></a> 
      <!-- ACCORDION HEADER --> 
       <a class="accordion" href="#renovation" title="Afficher/masquer les details pour Renovation">Renovation</a> 
      <!-- ACCORDION CONTENT --> 
       <div> 
        <p>Dans le cadre d'un projet de renovation, un soin particulier doit etre apporte à l'electricite. Une belle installation electrique est une installation qui ne se voit pas&nbsp;: l'exercice requiert un savoir-faire tout particulier, au travers de solutions adaptees au bati. En renovation, le chauffage electrique est par exemple le seul moyen d'obtenir une installation performante sans avoir a effectuer de gros travaux.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Javascript --> 
     <!-- JQuery --> 
      <!-- jQuery Google CDN hosted with local fallback --> 
      <!-- Weird doc.write slashes explained here http://www.codehouse.com/javascript/articles/external/ --> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
      <script type="text/javascript"> 
      if (typeof jQuery == 'undefined') { 
      document.write('<script src="', 'js/jquery.js', '" type="text/JavaScript"><\/script>'); 
      } 
      </script> 
     <!-- Accordion --> 
      <script src="js/jquery-ui.min.js" type="text/javascript"></script> 
      <script type="text/javascript"> 
       $().ready(
        function(){ 
         $(".accordion").click(function(event){ 
         if (!$(this).hasClass('selected')){ 
          $(this).addClass("selected"); 
          window.location.hash=this.hash; 
          } 
         else if ($(this).hasClass('selected')){ 
          $(this).removeClass('selected'); 
          window.location=window.location.href.split('#')[0]; 
          } 
         }); 
         $('#projet').accordion({ 
          autoHeight: false, 
          navigation: true, 
          collapsible: true, 
          active: false, 
          header: '.accordion' 
         }); 
        }); 
      </script> 
     <!-- Menu --> 
      <script type="text/javascript" src="js/menu.js"></script> 
</body> 
</html>

とライブページ：http://davidgmmartin.free.fr/accordion/test.html

それは私にナットを駆動しています、これで私を助けてください！あなたの助けのための

おかげで、デビッド

出典

2011-02-07 David MARTIN

もう一つの疑問は、なぜあなたはwindow.locationのでハッシュを設定していますか？

ナビゲーション内のアコーディオンアイテムの「クリック」を簡単に行うことができます。

$("something").click() < - アイテムを強制的にクリックすると、すべてのイベントは既知のとおりに処理されます。

私は

$(".ui-accordion .ui-accordion-header:nth(1)").click()

これを試してみたし、それが

「n番目のは、（1）」あなただけに持っているので、ちょうど、テストしている、あなたは0、または1を渡すか、またはすることができます動作します私たちはところでopenTab("extension");

よう

function openTab(name) { 
$(".ui-accordion .ui-accordion-header[href=#" + name + "]").click() 
}

のようなカスタムメソッドを作ります。これは：window.location=window.location.href.split('#')[0];は完全なページをリフレッシュしています！

出典

2011-02-07 16:55:32 Luke

こんにちはルーク、お返事ありがとうございます。私はURLにハッシュを設定しているので、別のページからサブメニューリンクを経由してくると、適切なパネルが開きます。私はこのwindow.location.href.splitの構文は、完全なページの更新を強制しているが、パネルを閉じるときに、ハッシュタグとタグ自体をURLから削除する他の方法が見つかりませんでした。 –

あなたはハッシュを好きなものに設定できます。なぜなら、それをヌルに設定しないでください。私の答えがあなたを助け、あなたの質問に答えたら私に知らせてください。たぶんあなたはそれを回答としてマークして、同様の問題を抱えている他のユーザーが答えを見つけるのを助けるかもしれません。 – Luke

ハッシュをnullに設定すると、noneまたはemptyは、URLからハッシュ自体を削除することはできません。あなたの答えをマークする前に、私は自分自身でそれを見つけることができなかったので、あなたが「アコーデオンのアイテムをクリックするように強制する」という正確な構文を知りたいと思っています:-(助けてくれてありがとう、David –

jQuery UIアコーディオン：トップメニューからパネルを開き、開いているパネルを閉じる

答えて

関連する問題