带覆盖的jQuery Accordion

Question

我在手风琴上工作以展示旧的博客文章。如果你使用一个标签，下面的部分会下降或跳转，但我希望标签位于下面的行。 我尝试了一些解决方案来处理z-index和固定位置，但没有任何方法可行。 这是我的代码片段：

jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    jQuery('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');

        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}

.accordion-section-content {
  background-color: #faf5f2;
}
.termin-header {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 45px;
  text-align: center;
      background: rgba(99,98,96,0.7);

}

.termin-header > h2 {
  color: white;
}

#firstimage{
    position:relative;
    background: no-repeat 50% / 100%;
    border-bottom: 2px solid #000;
}
.firstimage > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
.firstimage > div{
    position: absolute;
    top: 0;
    width:100%;
    height:100%;
}

.firstimage p{
   padding:30px;
}

.aktuelles-title  {
  color: white;
    font-size: 30px;
    font-family: 'AracneCondensedRegular';
  text-align: center;
    margin: 0px;
  height: 100px;
  }
.aktuelles-wrapper {
  margin-top: 50px;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">




            <!-- Toggle #1 -->


<!-- Toggle Link -->


<!-- Toggle Content to display -->

            <div class="accordion-section">
  <div class="col-sm-4 aktuelles-wrapper">
<article id="post-122" class="post-122 post type-post status-publish format-image has-post-thumbnail hentry category-aktuelles post_format-post-format-image">
  <header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/Unbenannt-1_08.gif');">
  <div>                                     
<a class="accordion-section-title" href="#accordion-122"><h2 class="aktuelles-title entry-title ">And the Winner is….</h2></a>
    </div>

    </header><!-- .entry-header -->
    <div id="accordion-122" class="accordion-section-content">

<!-- .toggle-content (end) -->
    <div class="aktuelles-content">
        <p>Hier ist das Gewinneroutfit von Stil-Frage Teil 3. Felix hat sich für Outfit Nr. 3 entschieden! Wir freuen uns mit YVONNE MARCATH. Sie ist die Gewinnerin des 50€ Einkaufsgutscheins.</p>

            </div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>




            <!-- Toggle #1 -->


<!-- Toggle Link -->


<!-- Toggle Content to display -->


            <div class="accordion-section">
  <div class="col-sm-4 aktuelles-wrapper">
<article id="post-93" class="post-93 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
  <header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/outfit.jpg');">
  <div>                                     
<a class="accordion-section-title" href="#accordion-93"><h2 class="aktuelles-title entry-title ">Ein Typ….Drei Outfits.</h2></a>
    </div>

    </header><!-- .entry-header -->
    <div id="accordion-93" class="accordion-section-content">

<!-- .toggle-content (end) -->
    <div class="aktuelles-content">
        <p><strong>Für welches Outfit entscheidet sich Felix aus Ramsdorf?</strong></p>
<p>Felix war einverstanden bei uns drei verschiedene Outfits anzuprobieren. Am Ende kann er sich aber nur für eins entscheiden – welches wird das sein? Jetzt auf der Facebook – Seite vom Modehaus Cohausz abstimmen und mit etwas Glück einen Modegutschein gewinnen. Das Video vom Casting findet Ihr <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">hier</a> und auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">BorioTv.</a></p>
<div class="align-center">
<p>Die Auflösung gibt es am kommenden Mittwoch.</p>
</div>

            </div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>




            <!-- Toggle #1 -->


<!-- Toggle Link -->


<!-- Toggle Content to display -->


            <div class="accordion-section">
  <div class="col-sm-4 aktuelles-wrapper">
<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
  <header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/08/verkaufsoffen.jpg');">
  <div>                                     
<a class="accordion-section-title" href="#accordion-1"><h2 class="aktuelles-title entry-title ">Borken lädt ein…</h2></a>
    </div>

    </header><!-- .entry-header -->
    <div id="accordion-1" class="accordion-section-content">

<!-- .toggle-content (end) -->
    <div class="aktuelles-content">
        <p>zum 07. Borkener Ostermarkt am Sonntag, den 22. März 2015 ab 11.00 Uhr.&nbsp;Die Geschäfte in der Innenstadt sind von 13.00 Uhr bis 18.00 Uhr geöffnet.</p>

            </div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>




            <!-- Toggle #1 -->


<!-- Toggle Link -->


<!-- Toggle Content to display -->


            <div class="accordion-section">
  <div class="col-sm-4 aktuelles-wrapper">
<article id="post-329" class="post-329 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
  <header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/catwalk.jpg');">
  <div>                                     
<a class="accordion-section-title" href="#accordion-329"><h2 class="aktuelles-title entry-title ">Vielen Dank für Ihr Interesse an unserer Fashion Show…</h2></a>
    </div>

    </header><!-- .entry-header -->
    <div id="accordion-329" class="accordion-section-content">

<!-- .toggle-content (end) -->
    <div class="aktuelles-content">
        <p>Wir bedanken uns bei unseren kleinen und großen Modells und dem zahlreich erschienenen Publikum für den gelungenen stimmungsvollen Abend.<br>
Weitere Bilder der Show auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borken-live.de/" target="_blank">Borken-Live.de</a></p>

            </div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>




            <!-- Toggle #1 -->


<!-- Toggle Link -->


<!-- Toggle Content to display -->


            <div class="accordion-section">
  <div class="col-sm-4 aktuelles-wrapper">
<article id="post-332" class="post-332 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
  <header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung.jpg');">
  <div>                                     
<a class="accordion-section-title" href="#accordion-332"><h2 class="aktuelles-title entry-title ">Modegutschein zu gewinnen…</h2></a>
    </div>

    </header><!-- .entry-header -->
    <div id="accordion-332" class="accordion-section-content">

<!-- .toggle-content (end) -->
    <div class="aktuelles-content">
        <p>Genießen Sie einen modischen Vorgeschmack auf das Frühjahr bei unserer Modenschau am 19. März 2015.&nbsp;Wir laden Sie, gern auch Ihre Freundin, auf ein Gläschen Prosecco ein. Mit ein wenig Glück haben Sie die Möglichkeit einen Modegutschein zu gewinnen.</p>

            </div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>




            <!-- Toggle #1 -->


<!-- Toggle Link -->


<!-- Toggle Content to display -->


            <div class="accordion-section">
  <div class="col-sm-4 aktuelles-wrapper">
<article id="post-335" class="post-335 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
  <header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung2.jpg');">
  <div>                                     
<a class="accordion-section-title" href="#accordion-335"><h2 class="aktuelles-title entry-title ">Noch auf der Suche nach dem perfekten Frühjahrslook?</h2></a>
    </div>

    </header><!-- .entry-header -->
    <div id="accordion-335" class="accordion-section-content">

<!-- .toggle-content (end) -->
    <div class="aktuelles-content">
        <div class="news-list-item">
<p>Welche Farben sind in dieser Saison angesagt? Wie kombiniert man die neusten Trends?</p>
<div class="align-center">
<p>Wir zeigen Ihnen den Frühling auf unserer exclusiven Fashionshow</p>
<p>am Donnerstag, dem 12. März 2015 um 19.03 Uhr.</p>
<p>Wir bitten um Anmeldung unter 02861/92190 oder</p>
<p>info@mode-cohausz.de</p>
</div>
</div>
<div class="news-list-item"></div>

            </div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>



    </div>

Answer 1

我刚才做了类似的事情。 我知道z-index在玩了一段时间之后为我做了这件事。 在将它放在正确位置然后在jquery中切换之后，你还可以将文章隐藏在你的CSS中。

编辑：

$(document).ready(function(){
    $("image").click(function(){
        $("#articleText").toggle();
    });
});

#image{
  background-color: green;
  width: 80px;
  height: 80px;
  }
#articleText{
  visibility: ;
  }

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="image">this represents a image</div><!-- image or somthing else, you have images what show a artivle on click -->
    <div id="articleText">
    This is a article
    </div> <!-- your article -->
  </body>
</html>

像这样的东西应该有用，我跟z-index不一样。 我在google上发现了一个可能对你有帮助的链接，我会关注这个位置绝对的部分： https://css-tricks.com/almanac/properties/z/z-index/