アンカーリンク先のターゲットフィールドセット

Question

私は、折りたたまれたフィールドセット内にあるページのセクションにリンクしています。

ユーザーがこのリンクをクリックすると、ページを下にスクロールしてフィールドセットを開いてコンテンツを表示します。

私はすべてのスクロール設定を持っており、折りたたまれたフィールドセット内でターゲットを隠すまで機能し、機能が中断します。スクロールするための

<a href="#section1">Section 1</a> 

<fieldset class="collapsed"> 
    <div id="section1"> 
    ..content 
    </div> 
</fieldset> 

そして、私のjQueryの...

(function ($) { 
     var $root = $('html, body'); 
     $('a').click(function() { 
      var href = $.attr(this, 'href'); 
      $root.animate({ 
       scrollTop: $(href).offset().top 
      }, 500, function() { 
       window.location.hash = href; 
      }); 
      return false; 
     }); 
    }(jQuery)); 

は、どのように私はアンカーのクリックがフィールドセットを開くために得るか、そして、それまでスクロール？

Answer 1

<legend>要素を<fieldset>に追加し、<legend>を#section1とします。

クラス.collapsedと.expandedを切り替えるには、jQueryのにこれを追加します。

var exp = $(href).parent(); 
exp.toggleClass('collapsed', 'expanded'); 

あなたが.collapsedと.expanded状態を作成するだけでなくCSSを使用する必要があります。

.collapsed { 
    height: 0; 
    border: none; 
} 
.expanded { 
    height: 300px; 
} 
#section1 { 
    height: 36px; 
    position: relative; 
    z-index: 1; 
    background: #000; 
    color: #fc2; 
    border-radius: 6px; 
    width: 100%; 
} 
.collapsed > .content { 
    font: 400 0/0 'Verdana'; 
    height: 0; 
    line-height: 0; 
    opacity: 0; 
} 
.content { 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: auto; 
    font: 400 16px/1.4 'Verdana'; 
}  

HTMLがそのように変更されました<fieldset>の<legend>をクリックし、.collapsedと.expandedを切り替えることもできます。

<fieldset class="collapsed"> 
    <legend id="section1"><a href="#section1">Heading</a></legend> 
    <div class="content"> 
    ..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj 
    </div> 
</fieldset> 

スニペット

(function($) { 
 
    var $root = $('html, body'); 
 
    $('a').click(function() { 
 
    var href = $.attr(this, 'href'); 
 
    $root.animate({ 
 
     scrollTop: $(href).offset().top 
 
    }, 500, function() { 
 
     window.location.hash = href; 
 
    }); 
 
    var exp = $(href).parent(); 
 
    exp.toggleClass('collapsed', 'expanded'); 
 

 
    return false; 
 
    }); 
 

 
}(jQuery));

body { 
 
    font: 400 16px/1.4 'Verdana'; 
 
} 
 
fieldset { 
 
    width: 400px; 
 
    position: relative; 
 
} 
 
legend { 
 
    margin-top: 25%; 
 
    text-align: center; 
 
    font-size: 24px; 
 
} 
 
a { 
 
    width: 100%; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 
.collapsed { 
 
    height: 0; 
 
    border: none; 
 
} 
 
.expanded { 
 
    height: 300px; 
 
} 
 
#section1 { 
 
    height: 36px; 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #000; 
 
    color: #fc2; 
 
    border-radius: 6px; 
 
    width: 100%; 
 
} 
 
.collapsed > .content { 
 
    font: 400 0/0 'Verdana'; 
 
    height: 0; 
 
    line-height: 0; 
 
    opacity: 0; 
 
} 
 
.content { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: auto; 
 
    font: 400 16px/1.4 'Verdana'; 
 
} 
 
.spacer { 
 
    height: 700px; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 

 

 

 
<a href="#section1">Section 1</a> 
 

 
<!--For demo--> 
 
<div class="spacer"></div> 
 

 
<fieldset class="collapsed"> 
 
    <legend id="section1"><a href="#section1">Heading</a></legend> 
 
    <div class="content"> 
 
    ..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj 
 
    </div> 
 
</fieldset>

Answer 2

(function ($) { var $root = $('html, body'); $('a').click(function() { var href = $.attr(this, 'href'); $(href).parent().show(); //updated line $root.animate({ scrollTop: $(href).offset().top }, 500, function() { window.location.hash = href; }); return false; }); }(jQuery));

は単純な変更を行いました。あなたが見ることができる、上のコメント行。