Question

我正在尝试制作Bootstrap手风琴下拉式短代码。这一切都有效，除了ID不起作用。当我检查代码时，尽管已经设置了aria-controls，aria-labelledby，href值都是空的。如何为两个必要的手风琴ID设置唯一ID以使此下拉菜单起作用？我需要这些是唯一的原因是因为会有多个下拉列表因此需要单独调用它们。

这是我的shortcode.php文件中的短代码：

 function FAQ($atts) {
    extract( shortcode_atts(array('title'=>'', 'content'=>'', 'titleID'=>'', 'bodyID'=>''), $atts) );
    $FAQ = '<div class="panel panel-default">
        <div class="panel-heading" role="tab" id="'.$titleID.'">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#'.$bodyID.'" aria-expanded="false" aria-controls="'.$bodyID.'">
              <i class="fa fa-arrow-circle-o-down"></i> '.$title.'
            </a>
          </h4>
        </div>
        <div id="'.$bodyID.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="'.$titleID.'">
          <div class="panel-body">' . $content . '

          </div></div></div>';

return $FAQ;

}

 add_shortcode('FAQ', 'FAQ');

这是我用上面的代码包装的内容。

   function FAQpanel( $atts, $content = null ) {
    return '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">' .  do_shortcode($content) . '</div>';

 }

  add_shortcode( 'FAQpanel', 'FAQpanel' );

以下是行动中的短代码

  [FAQpanel][FAQ title="Question One" titleID="2" headerID="5"]
  Vivamus sagittis lacus vel augue lapreet rutrum....
   [/FAQ][/FAQpanel]

它确实有效但我无法打开面板。

Answer 1

/* FAQ
-------------------------------------------------- */

    // Add Shortcode
    function faq_shortcode( $atts , $content = null ) {

        // Attributes
        extract ( shortcode_atts(

            array(

                'class'   => '',
                'type'    => '',
                'question'=> '',
                'id'      => '' 

            ),

            $atts )

        );

            $out .='<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
            $out .='<div class="panel panel-default">';
            $out .='<div class="panel-heading" role="tab" id="headingOne">';
            $out .='<h4 class="panel-title">';
            $out .='<a role="button" data-toggle="collapse" data-parent="#accordion" href="#'. $id .'" aria-expanded="true" aria-controls="collapseOne">';
            $out .='<i class="more-less glyphicon glyphicon-plus"></i>';
            $out .= $question;
            $out .='</a>';
            $out .='</h4>';
            $out .='</div>';
            $out .='<div id="'. $id .'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">';
            $out .='<div class="panel-body">'; 
            $out .= do_shortcode($content) ;
            $out .='</div>';
            $out .='</div>';
            $out .='</div>';


         return $out;

    }

    add_shortcode( 'faq', 'faq_shortcode' );

示例：

[faq question="Honest and dependable" id="collapseOne"]

this is content part (do short code)

[/faq]

[faq question="Quality commitment" id="collapseTwo"]

this is content part (do short code)

[/faq]

[faq question="Quality commitment" id="collapseThree"]

this is content part (do short code)

[/faq]

Answer 2

Bootstrap 4两个手风琴（折叠）在单页（同一页面）中没有冲突 https://getbootstrap.com/docs/4.0/components/collapse/

//添加短代码 function faq_shortcode（$ atts，$ content = null）{

    // Attributes
    extract ( shortcode_atts(

        array(

            'class'   => '',
            'question'=> '',
            'id'      => '' ,
            'collapse'=>'',
            'cid'=>'',
            'hid'=>'',
            'aria'=>'',
            'accid'=>''

        ),

        $atts )

    );




        if ( $atts['collapse'] == 'show' ) { 

            $collapse =  'collapse show';

            $aria = 'true';

        } else {

            $collapse =  ' collapse';
            $aria = 'false';

        }

       if ( $atts['class'] ) {

            $class = $atts['class'];

        } else {

         $class = 'some';

        }

        $out .='<div class="card">';
        $out .= '<div class="card-header" id="'.$hid.'">';
        $out .='<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#'.$cid.'" aria-expanded="'.$aria.'" aria-controls="'.$cid.'">'.$atts['question'].'</button>'; 
        $out .='</div>';
        $out .= '<div id="'.$cid.'" class="'.$collapse.'" aria-labelledby="'.$hid.'" data-parent="#'.$atts['accid'].'">';
        $out .=  '<div class="card-body">';
        $out .= do_shortcode($content) ;
        $out .=  '</div>';
        $out .=  '</div>';
        $out .=  '</div>';





        return $out;

}

add_shortcode( 'faq', 'faq_shortcode' );

第6列

<div id="accordion">

[faq question =＆＃34; Lorem Ipsum只是虚拟文字＆＃34;藏=＆＃34; headOne＆＃34; CID =＆＃34;加冒号＆＃34; ACCID =＆＃34;手风琴＆＃34;崩溃=＆＃34;显示＆＃34;]

一个长期存在的事实是，在查看其布局时，读者会被页面的可读内容分散注意力。

的要点

[/ FAQ]

[faq question =＆＃34; Lorem Ipsum只是虚拟文字＆＃34;藏=＆＃34; headTwo＆＃34; CID =＆＃34; colTwo＆＃34; ACCID =＆＃34;手风琴＆＃34; ]

一个长期存在的事实是，在查看其布局时，读者会被页面的可读内容分散注意力。

的要点

[/ FAQ]

[faq question =＆＃34; Lorem Ipsum只是虚拟文字＆＃34;藏=＆＃34; headThree＆＃34; CID =＆＃34; colThree＆＃34; ACCID =＆＃34;手风琴＆＃34; ]

一个长期存在的事实是，在查看其布局时，读者会被页面的可读内容分散注意力。

的要点

[/ FAQ]

</div>

另一栏6

<div id="accordion1">

[faq question =＆＃34; Lorem Ipsum只是虚拟文字＆＃34;藏=＆＃34; head1One＆＃34; CID =＆＃34; col1One＆＃34; ACCID =＆＃34; accordion1＆＃34;崩溃=＆＃34;显示＆＃34;]

一个长期存在的事实是，在查看其布局时，读者会被页面的可读内容分散注意力。

的要点

[/ FAQ]

[faq question =＆＃34; Lorem Ipsum只是虚拟文字＆＃34;藏=＆＃34; head1Two＆＃34; CID =＆＃34; col1Two＆＃34; ACCID =＆＃34; accordion1＆＃34; ]

一个长期存在的事实是，在查看其布局时，读者会被页面的可读内容分散注意力。

的要点

[/ FAQ]

[faq question =＆＃34; Lorem Ipsum只是虚拟文字＆＃34;藏=＆＃34; head1Three＆＃34; CID =＆＃34; col1Three＆＃34; ACCID =＆＃34; accordion1＆＃34; ]

一个长期存在的事实是，在查看其布局时，读者会被页面的可读内容分散注意力。

的要点

[/ FAQ]

</div>

创建Bootstrap手风琴短代码 - 设置ID

2 个答案: