2

にchildがあり、ビューポートがサブ 480px の場合、内にhrefあるを変更する必要がある特別なシナリオにいます。<a><li><li><ul>

私はJavaScriptの書き方についてほとんど知りませんが、これがロジックがどのように機能するかを考えています:

  1. ビューポートは 480px 以下ですか?
  2. もしそうなら、のトップレベルの<li>中にあるものを直接見つけてください。<nav id="navigation1"><ul>
  3. #2 が返すものから、 child も含むものを見つけます<a>。
  4. #3 が返すものから、 child も含むものを見つけます<ul>。
  5. #4 の戻り値から、 topのhref値を ''#navigation1`` に変更します。<a><li>

HTMLは次のとおりです。

<nav id="navigation1" class="navigation" style="height:auto; z-index:1; overflow:visible">
    <ul class="f-fp f-lp" id="fwNav1">
        <li class="fwNavItem"><a href="change-this-link.html"><span class="Navigation">About</span></a>
            <ul class="sub">
                <li class="fwFirstChild fwNavItem"><a href="#"><span class="Navigation">About Me</span></a></li>
                <li class="fwNavItem"><a href="#"><span class="Navigation">About You</span></a></li>
                <li class="fwLastChild fwNavItem"><a href="#"><span class="Navigation">About We</span></a></li>
            </ul>
        </li>
        <li class="fwNavItem"><a href="change-this-link.html"><span class="Navigation">Services</span></a>
            <ul class="sub">
                <li class="fwFirstChild fwNavItem"><a href="#"><span class="Navigation">What Me Do</span></a></li>
                <li class="fwLastChild fwNavItem"><a href="#"><span class="Navigation">What You Do</span></a></li>
            </ul>
        </li>
    </ul>
</nav>

(私は知っています、最もきれいな HTML ではありませんが、それは WYSIWYG によって作成されたものであり、私はそれを制御できません。申し訳ありません。)

ソリューションは、バニラ JavaScript である必要があります。jQuery は使用しないでください。

ありがとう！

4

1 に答える 1

5 
if (window.innerWidth < 480) { // note 1
    var links = document.querySelectorAll("#navigation1 > ul > li > a");
    var link;
    for (var i = 0; i < links.length; i++) {
        link = links[i];
        if (link.parentElement.getElementsByTagName("ul").length > 0) // note 2
            link.href = "#navigation1";
    }
}

注 1: window.innerWidth IE8 には存在しません (ブラウザーの要件を指定していません)。は false であるためundefined < 480、これはコードがそこで実行されないことを意味するだけであり、おそらく問題ありません。<= 480また、必要に応じて変更することもできます。あなたの質問はその点で矛盾しています。

注 2:これは 100% あなたの意見ではありません。むしろ、必ずしも子ではなく、子孫 <ul>があることを確認します。これは HTML からは問題ないように見えますが、そうでない場合は、追加のチェックが必要です ( の直接の子を繰り返し処理して をlink.parentElementチェックする<ul>か、 の結果をと同一getElementsByTagName()のものをチェックします。残念ながら、標準の DOM メソッドはありません。特定の要素の直接の子を何らかのプロパティでフィルタリングします)。parentElementlink.parentElement

また、これは 1 回しか実行されないため、ブラウザーのサイズ変更 (または電話の向きの変更) によって幅が変更される可能性がありますが、リンクは更新されないことに注意してください。これは、CSS が新しい幅に応じて変更されるため、リンクを変更する要件がレスポンシブ CSS (つまり、メディア クエリ) に関連している場合などに問題になります。

于 2013-09-04T13:33:18.467 に答える