0

これが簡単な修正であることを願っています。または、私のロジックがオフになっている可能性があります。jqueryでアコーディオンメニューを作成しています。アコーディオンの頭にラジオボタンがあり、本体の中にスケジュールがあります。ユーザーがアコーディオンを展開したり折りたたんだりできるようにしたいのですが、スケジュールが選択されると、選択されたスケジュールは明るい灰色の背景に赤で概説されます。私が持っているものは機能しています。選択した単一の要素ではなく、すべての要素に矢印の回転と toggleClass を適用するだけです。

現在起こっていることは、[スケジュール] をクリックすると、1 つの矢印ではなくすべての矢印が回転することです。また、ラジオ ボタンを選択すると、「clickedSchedule」クラスですべての div が強調表示されます。

これは、関数で (this) を使用することに関係していると思います...どのように記述すればよいかわかりません。おそらく私はこれを優雅な方法で実行していないので、すべての提案を受け入れます。

HTML:

    <ul id="menu" class="dropdown">
    <div class="clickedSchedule">
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 1</h2></a>

    <div class="scheduleChoice" style="text-align:left;">
      <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 1" /><label>First Choice</label>
      <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 1" /><label>Second Choice</label>
      <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 1" /><label>Third Choice</label>
    </div>
        <ul>
            <li>

              <div><img src="images/01_fall.gif" width="550" height="334" /></div>
              <div><img src="images/01_sp.gif" width="550" height="334" /></div>

            </li>
        </ul>
    </li>
    </div>

    <div class="clickedSchedule">
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 2</h2></a>
    <div class="scheduleChoice" style="text-align:left;">
      <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label>
      <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label>
      <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label>
    </div>
        <ul>
            <li>            
                <div><img src="images/02_fall.gif" width="550" height="334" /></div>
                <div><img src="images/02_sp.gif" width="550" height="334" /></div>
            </li>
        </ul>
    </li>
    </div>
</ul>

Jクエリ

<script>
//Expand/Collapses Menu & Rotates arrow
$(document).ready(function() {
    $("#menu:first li > a").click(function() {
        $(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("fast");
        $("#menu:first li > a > div").toggleClass("arrowUp").toggleClass("arrow");
    });
});
</script>
<script>
//highlights chosen Schedule
$(document).ready(function(){

  $("input[name$='first_choice']").click(function(){

  var radio_value = $(this).attr("checked");

  if(radio_value=='checked') {
    $("div.clickedSchedule").css({"border-color" : "red", "border-style" : "solid", "border-width" : "1px", "background-color" : "#f6f6f6"});
    }
  });
});
</script>

CSS:

これらのクラスを切り替える toggleCLass があります。

.arrow {
    background:url(../images/accordionDropArrow_expanded.png) no-repeat;
    width:18px;
    height:17px;
    float:left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

.arrowUp {
    background:url(../images/accordionDropArrow_expanded.png) no-repeat;
    width:18px;
    height:17px;
    float:left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

多分私はこれらのことを一緒に強制しているだけで、より洗練されたコーディングソリューションがあります. 私はそれをstackoverflowの神々に任せます:)

アップデート

ここにフィドルを追加しました

最新の jquery スクリプトを実行しています。結果の最初の選択肢をクリックすると、1 つだけではなくすべての clickedSchedule クラスが選択されていることがわかります。

4

2 に答える 2

0

いくつかの単純化とさらなる調査の後、私はそれを機能させることができました。

私が使用したスタックの記事はここにあります

input:not(:checked) オプションについて知ったら、それは簡単なことでした。

jQueryコードは次のとおりです。

$(document).ready(function(){
    $(document).ready(function(){
    //add the Selected class to the checked radio button
    $('input:checked').parent().parent().parent().addClass("clickedSchedule");
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio
    $('input').click(function () {
        $('input:not(:checked)').parent().parent().parent().removeClass("clickedSchedule");
        $('input:checked').parent().parent().parent().addClass("clickedSchedule");
    });
});
});

html:

<div class="unclickedSchedule">
<li><a class="expanded"><h2>Schedule 2</h2></a>
<div class="scheduleChoice" style="text-align:left;">
  <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label>
  <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label>
  <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label>
</div>
    <ul>
        <li>            
            <div style="width:550px;padding:0 0 0 50px;"><img src="images/animation/02_fall.gif" width="550" height="334" /></div>
            <div style="width:550px; padding:0  0 20px 50px;;"><img src="images/animation/02_sp.gif" width="550" height="334" /></div>
        </li>
    </ul>
</li>
</div>

これは、元の質問の回転矢印には対処しませんが、ラジオ ボタンをクリックすると、強調表示された選択を解決します。

于 2012-05-01T16:11:21.243 に答える
0

あなたが望むのは、ユーザーが一度に1つのラジオボタンのみを選択するように制限することだと思います。一連のラジオ ボタンを相互に排他的にするには、すべてのラジオ ボタンに同じ名前を追加します。これがあなたの問題であることを願っています:)

例えば：

<input type="radio" name="choice" id="choice1" />
<input type="radio" name="choice" id="choice2" />
于 2012-04-26T17:18:35.467 に答える