Ankerverbindung zum Ziel innerhalb des Feldsets

Question

Ich verlinke zu Abschnitten auf der Seite, die sich in minimierten Feldgruppen befinden.

Wenn ein Benutzer auf diesen Link klickt, möchte ich die Seite nach unten scrollen und das Feldset öffnen, um den Inhalt anzuzeigen.

Ich habe alle Scrolling eingerichtet, und es funktioniert, bis ich das Ziel in einem minimierten Feldset ausblenden, dann bricht die Funktionalität.

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

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

Und meine jQuery dann zum Scrollen ...

(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)); 

Wie erhalte ich den Klick auf den Anker der Fieldset zu öffnen, und dann, um es nach unten scrollen?

Answer 1

Fügen Sie das <legend> Element in das <fieldset> ein und wählen Sie <legend> als #section1.

Fügen Sie diese auf jQuery, die Klasse zu wechseln .collapsed und .expanded:

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

Sie müssen auch CSS verwenden, um die .collapsed und .expanded Staaten zu schaffen:

.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'; 
}  

Die HTML ist so modifiziert, Sie können auch auf die <legend> der <fieldset> klicken und .collapsed und .expanded umschalten.

<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> 

Snippet

(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));

gerade eine einfache Änderung. Was Sie sehen können, kommentierte Zeilen oben.