Question

我已经下载了Bootstrap Tabcordion插件，在移动屏幕加载时会将标签折叠为手风琴。我无法使插件正常工作。我按照说明操作，但我不知道如何调用这些功能。

我的header.php文件包含bootstrap.min.js的链接，我已经在我的wordpress管理页面中粘贴了标记代码。因此，在我的网站上，内容和部分内容都存在，但它并没有实现插件应该做的事情。

如何使用我下载插件时获得的.ZIP文件？我是否必须解压缩并将插件的文件拖放到我网站的根目录中？

我的header.php文件

＆＃13;

eval

＆＃13;

我的Wordpress管理页面

＆＃13;

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Temporary Gallery, Centre for contemporary art, Köln" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="dist/css/bootstrap-responsive-tabs.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head>

＆＃13;

这个javascript我不知道在哪里粘贴：

＆＃13;

<div class="tabcordion">
  <ul class="nav nav-tabs">
    <li class="active"><a data-target=".home">Home</a></li>
    <li><a data-target=".profile">Profile</a></li>
    <li><a data-target=".messages">Messages</a></li>
    <li><a data-target=".settings">Settings</a></li>
  </ul>
  <div class="tab-content">
    <div class="home active in">
      <h3>Home</h3>
      <p>Rhoncus magna nec enim, et proin aliquet mid, porta magnis.</p>
    </div>
    <div class="profile">
      <h3>Profile</h3>
      <p>Odio mattis, non ut! Porttitor nunc phasellus cras elementum.</p>
    </div>
    <div class="messages">
      <h3>Messages</h3>
      <p>Enim hac tristique elementum, nec rhoncus porttitor sagittis cum.</p>
    </div>
    <div class="settings">
      <h4>Settings</h4>
      <p>Arcu auctor, porttitor tincidunt, aliquam ut ut, placerat porta pulvinar dictumst?</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

这是你的错误：

Uncaught TypeError: $(...).tabcordion is not a function
    at index.html:41

您缺少tabcordion.js文件，其中定义了该函数。

从Bootstrap Tabcordion网站下载ZIP存档，按照其安装程序（bower install命令）并在HTML中包含所需文件：

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Temporary Gallery, Centre for contemporary art, Köln" />
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="bower_components/tabcordion/tabcordion.js"></script>
<head>

这是JSFiddle

Answer 2

您错过了 href =＆＃34;＆＃34;

请使用 href

请参阅以下代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#e0e0e0">

    <LinearLayout
        android:id="@+id/layout_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <include layout="@layout/support_simple_spinner_dropdown_item"/>
    </LinearLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/startpage_margin"
        android:scrollbars="vertical"
        android:layout_below="+id/layout_header"
        />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <ProgressBar
            android:id="@+id/pb_loading_indicator"
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:layout_centerInParent="true"
            android:visibility="invisible"/>

        <TextView
            android:id="@+id/tv_error_message_display"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="Error"
            android:textSize="20sp"
            android:visibility="invisible"/>

    </RelativeLayout>
</LinearLayout>

Bootstrap选项卡插件无法正常工作

2 个答案: