Bei Verwendung der Template-Engine des Laui-Frameworks schlägt das Klickereignis des Faltpanels fehl, und auch der kleine Pfeil schlägt fehl.

Zeigen Sie zunächst die fehlgeschlagene Seite an

Die Lösung ist: Nachdem die Vorlage gerendert wurde, müssen Sie das Faltpanel aktualisieren

Im Anhang ist mein vollständiger Code:

<body>
    <div class="layui-collapse" lay-filter="test" lay-accordion></div>
    
    <script src="./js/layui.js"></script>
    <script id="template" type="text/html">
      {
   
   {#  layui.each(d, function(index, item){ }}
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">{
   
   {item.title}}</h2>
        <div class="layui-colla-content layui-show">{
   
   {item.content}}</div>
      </div>
      {
   
   {#  }) }}
    </script>

    <script type="text/javascript">
      layui.use(["element", "jquery",'laytpl'], function () {
        let $ = layui.jquery;
        var element = layui.element;
        let laytpl=layui.laytpl

        let data = [
          {
            title: "李清照",
            content: "诗人李清照",
          },
          {
            title: "李清照1",
            content: "诗人李清照1",
          },
          {
            title: "李清照2",
            content: "诗人李清照2",
          },
        ];
        let getTpl=$('#template').html();

        laytpl(getTpl).render(data,function(html){
          $(".layui-collapse").html(html)
        })
        // 模板渲染完毕,在执行element.render()折叠面板就可以点击,小箭头也会展示出来
        element.render()
      });
    </script>
  </body>

Supongo que te gusta

Origin blog.csdn.net/qq_41964720/article/details/127646720
Recomendado
Clasificación