Question

过去1天我一直陷入一个问题，实际上我想在页面上用面包屑实现水平手风琴。我如何以动态方式实现，例如单击水平手风琴上的任何链接的同时更新面包屑对我来说是棘手的部分。你们有什么主意吗？

如何在每个面板上单击以更新面包屑？

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' / ', $a);
  });
    $('.breadcrumb').html( $bc.prepend('<a href="#Title One">test</a>') );
    return false;
})

article.accordion
{
    display: block;
    width: 43em;
    margin: 0 auto;
    background-color: #666;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}
article.accordion section
{
    position: relative;
    display: block;
    float: left;
    width: 2em;
    height: 12em;
    margin: 0.5em 0 0.5em 0.5em;
    color: #333;
    background-color: #333;
    overflow: hidden;
    border-radius: 3px;
}
article.accordion section h2
{
    position: absolute;
    font-size: 1em;
    font-weight: bold;
    width: 12em;
    height: 2em;
    top: 12em;
    left: 0;
    text-indent: 1em;
    padding: 0;
    margin: 0;
    color: #ddd;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
article.accordion section h2 a
{
    display: block;
    width: 100%;
    line-height: 2em;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}
article.accordion section:target
{
    width: 30em;
    padding: 0 1em;
    color: #333;
    background-color: #fff;
}
article.accordion section:target h2
{
    position: static;
    font-size: 1.3em;
    text-indent: 0;
    color: #333;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
article.accordion section,
article.accordion section h2
{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!DOCTYPE html>
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
  
<body>
  
  <div class="breadcrumb">
    <div class="item"><a href="#acc1">Test/ </a></div>
</div>
 <br>
<article class="accordion">
    <section id="acc1">    
       <h2><a href="#acc1"  class="items" >Title One</a></h2>
        <p>This content appears on page 1.</p>       
    </section>
    <section id="acc2">
       <h2><a href="#acc2"  class="items">Title Two</a></h2>
        <p>This content appears on page 2.</p>
         </div>
    </section>
    <section id="acc3">
        <h2><a href="#acc3"  class="items" >Title Three</a></h2>
        <p>This content appears on page 3.</p>
    </section>
    <section id="acc4">
        <h2><a href="#acc4">Title Four</a></h2>
        <p>This content appears on page 4.</p>
    </section>
    <section id="acc5">
        <h2><a href="#acc5">Title Five</a></h2>
        <p>This content appears on page 5.</p>
    </section>
</article>
</body>
</html>

Answer 1

您打算调用a类中的.items上的函数，但示例中未定义任何类。

 $(document).ready(function () {
        $('.items').on('click', function () {

            var $this = $(this),
                $bc = $('<div class="item"></div>');
            console.log($this);
            $this.parents('li').each(function (n, li) {
                var $a = $(li).children('a').clone();
                $bc.prepend(' / ', $a);
            });
            $('.breadcrumb').html($bc.prepend('<a href="#Title One">test</a>'));
            // return false;
        })
    });

，然后在您的html中将类提供给a。

 <h2><a href="#acc1" class="items">Title One</a></h2>

通过单击每个水平面板来动态更新面包屑

1 个答案: