yii2 中的下拉菜单不起作用
Dropdown in yii2 Not working
我正在尝试在 header 中添加下拉菜单。下拉标签来了。但是,dropdwon 值没有出现。可能是什么问题?
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\bootstrap\Dropdown;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);?>
<?
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown', 'url' => ['#'],
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
]);
NavBar::end();
?>
这是截图。
你们都看得很清楚。下拉列表进入 header。 'My Company' 文本的权利。但是,没有任何价值出现。不可点击。
有什么想法吗?
请试试这个代码:
echo '<ul id="navbar-id" class="navbar-nav navbar-right nav">';
echo '<li class="dropdown">';
echo '<a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>';
echo Dropdown::widget([
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
]);
echo '</li>';
echo '</ul>';
您应该简单地使用另一个 Nav
小部件而不是 Dropdown
:
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => [
'class' => 'navbar-nav navbar-left',
],
'items' => [
[
'label' => 'Dropdown',
'url' => '#',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'items' => [
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => ['data-method' => 'post'],
],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'<li class="divider"></li>',
['label' => 'Level 1 - Dropdown B', 'url' => '#'],
],
],
[
'label' => 'Login',
'url' => ['site/login'],
'visible' => Yii::$app->user->isGuest
],
],
'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
]);
NavBar::end();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© My Company <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
这是一个完整的布局代码。在任何视图中尝试此布局,它肯定会起作用。首先将此文件命名为 header.php(任何名称都可以),然后 select 您想要使用下拉菜单布局的视图文件。
您的代码中存在小错误:
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
NavBar::end();
然后是坏消息,bootstrap 有一个限制,下拉菜单只能有 2 个级别,而不是 3 个。
如果您想了解更多信息,请查看:
我正在尝试在 header 中添加下拉菜单。下拉标签来了。但是,dropdwon 值没有出现。可能是什么问题?
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\bootstrap\Dropdown;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);?>
<?
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown', 'url' => ['#'],
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
]);
NavBar::end();
?>
这是截图。
你们都看得很清楚。下拉列表进入 header。 'My Company' 文本的权利。但是,没有任何价值出现。不可点击。
有什么想法吗?
请试试这个代码:
echo '<ul id="navbar-id" class="navbar-nav navbar-right nav">';
echo '<li class="dropdown">';
echo '<a href="#" data-toggle="dropdown" class="dropdown-toggle">Label <b class="caret"></b></a>';
echo Dropdown::widget([
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
]);
echo '</li>';
echo '</ul>';
您应该简单地使用另一个 Nav
小部件而不是 Dropdown
:
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => [
'class' => 'navbar-nav navbar-left',
],
'items' => [
[
'label' => 'Dropdown',
'url' => '#',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'items' => [
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => ['data-method' => 'post'],
],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'<li class="divider"></li>',
['label' => 'Level 1 - Dropdown B', 'url' => '#'],
],
],
[
'label' => 'Login',
'url' => ['site/login'],
'visible' => Yii::$app->user->isGuest
],
],
'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
]);
NavBar::end();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© My Company <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
这是一个完整的布局代码。在任何视图中尝试此布局,它肯定会起作用。首先将此文件命名为 header.php(任何名称都可以),然后 select 您想要使用下拉菜单布局的视图文件。
您的代码中存在小错误:
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
NavBar::end();
然后是坏消息,bootstrap 有一个限制,下拉菜单只能有 2 个级别,而不是 3 个。
如果您想了解更多信息,请查看: