3

JSを使用してこのトグルクラスを実装するためのより良い方法は何ですか？

これがしていることは単にこれです：

[サービス]、[ギャラリー]、または[顧客]のいずれかをクリックすると、下のdiv内のクラス "hidden"が削除され、同じdiv内の他のすべてのリストにクラス"hidden"が追加されます。

何が起こっているかのライブデモはここで見ることができます：http ：//www.cyberbytesdesign.com/WIP2 （これはメインのヘッダーナビゲーションです）。

これが私が使用しているコードです（これはすべてのコードの半分未満であるため、間違いなく効率的な方法ではありませんが、要点を理解しています）。

<nav>
  <ul class="menu-option-set">
    <li>
      <a href="javascript:;" onmouseup="
        document.getElementById('services').classList.toggle('hidden');
        document.getElementById('gallery').classList.add('hidden');
        document.getElementById('customer').classList.add('hidden');
        ">Services</a>
    </li>
    <li>
       <a href="javascript:;" onmouseup="
         document.getElementById('gallery').classList.toggle('hidden');
         document.getElementById('services').classList.add('hidden');
         document.getElementById('customer').classList.add('hidden'); ">Gallery</a>
    </li>
    <li>
       <a href="javascript:;" onmouseup="
         document.getElementById('gallery').classList.toggle('hidden');
         document.getElementById('services').classList.add('hidden');
         document.getElementById('customer').classList.add('hidden'); ">Customer</a>
    </li>
  </ul>
</nav>
<div id="header-subnav">
  <nav>
    <ul id="services" class="hidden">
      <li <?php echo $bathroom ?>><a href="bathroom">Bathroom</a></li>
      <li <?php echo $kitchen ?>><a href="index.php">Kitchen</a></li>
      <li <?php echo $accessibility ?>><a href="index.php">Accessibility</a></li>
    </ul>
    <ul id="gallery" class="hidden">
      <li <?php echo $photo ?>><a href="gallery.php">Photo Gallery</a></li>
      <li <?php echo $project ?>><a href="project.php">Project Gallery</a></li>
    </ul>
    <ul id="customer" class="hidden">
      <li <?php echo $coupons ?>><a href="coupons.php">Coupons</a></li>
      <li <?php echo $testimonials ?>><a href="testimonials.php">Testimonials</a></li>
    </ul>
  <nav>
</div>

どういうわけかこれを使用するのと同様のことをしなければならないと思いますが、変更されています：

$('.menu-option-set a').click(function()
{
    // if clicked item is selected then deselect it
    if ($('#header-subnav').hasClass('hidden'))
    {
        $('#header-subnav').removeClass('hidden');
    }

    // otherwise deselect all and select just this one
    else
    {
        $('.menu-option-set a').removeClass('hidden');
        $('#header-subnav').addClass('hidden');
    }
});

何か案は？

4

2 に答える 2

2

変更の少ないバージョン：

メインメニューにデータ属性を追加し、その値をサブメニューのIDに設定します。

<nav>
  <ul class="menu-option-set">
    <li>
      <a href="#" data-subid="services">Services</a>
    </li>
    <li>
       <a href="#" data-subid="gallery">Gallery</a>
    </li>
    <li>
       <a href="#" data-subid="customer">Customer</a>
    </li>
  </ul>
</nav>

次に、イベントハンドラーをメインメニューにアタッチします。すべてのサブメニューを非表示にし、適切なサブメニューを表示します。（また、「隠し」クラスは必要ありません。）

$(function() {
    $("#header-subnav ul").hide();
    $('.menu-option-set a').on('click', function() {
        var $s = $("#" + $(this).attr('data-subid'));                
        if($s.is(':hidden')) {
            $("#header-subnav ul").hide();
            $s.show();
        } else {
            $s.hide();
        }
    });
});

それだけです！次に例を示します：http：//jsfiddle.net/dT225/1/

...しかし、私は個人的にこのスタイルを提案します：

各メインメニューの横にサブメニューを配置します。

<nav id="menu">
  <ul>
    <li>
      <a href="#">Services</a>
      <ul>
        <li <?php echo $bathroom ?>><a href="bathroom">Bathroom</a></li>
        <li <?php echo $kitchen ?>><a href="index.php">Kitchen</a></li>
        <li <?php echo $accessibility ?>><a href="index.php">Accessibility</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Gallery</a>
      <ul>
        <li <?php echo $photo ?>><a href="gallery.php">Photo Gallery</a></li>
        <li <?php echo $project ?>><a href="project.php">Project Gallery</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Customer</a>
      <ul>
        <li <?php echo $coupons ?>><a href="coupons.php">Coupons</a></li>
        <li <?php echo $testimonials ?>><a href="testimonials.php">Testimonials</a></li>
      </ul>
    </li>
  </ul>
</nav>​​​​​​​​​​​​​

メインメニューをクリックすると、イベントハンドラーはソース要素の次の要素を表示します。

$(function() {
    $('#menu li ul').hide();
    $('#menu a').on('click', function() {
        var $s = $(this).next();           
        if($s.is(':hidden')) {
            $('#menu li ul').hide();
            $s.show();
        } else {
            $s.hide();
        }
    });
});

よりシンプルで、保守しやすく、セマンティックだと思います。http://jsfiddle.net/dKtVK/1/

于 2012-07-24T10:32:10.600 に答える
1

まず第一に、プレーンなjavascriptでこれを行おうとしたことに対して親指を立てます。ただし、のようなものの使用classListはすべてのブラウザでサポートされているわけではないことに注意してください。コードはIEで失敗します。

あなたの質問に対して：あなたはほとんど自分であなたの質問に答えました。これらのイベント属性や要素は使用しないことを強くお勧めします。代わりに、それを（分離された）js（ファイル）に入れます。これにより、コードがクリーンで保守しやすくなります。

代わりにこれを書いてください：

<a class="services" href="javascript:;">Services</a>

次に、タグまたは別のJSファイルにイベントハンドラーを追加します。<script>

var gallery  = document.getElementById('gallery');
var services = document.getElementById('services');
var customer = document.getElementById('customer');

document.querySelector(".services").addEventListener(function(){
    /* Do your stuff here */
    gallery.classList.toggle('hidden');
    /*...and so on...*/
});

ここで使用querySelectorしたのは、jQueryに非常に似ているため、多くの人に馴染みがあり、IE>=8でサポートされているためです。ただし、自分に合ったものを自由に使用してください（ブラウザのサポートに必要です）。

jQuery（投稿した2番目のコードスニペット）を使用すると、これが非常に簡単になり、すべてのブラウザーで正常に機能するため、自由に使用して作業を節約できます。

于 2012-07-24T10:08:08.070 に答える