我试图隐藏并显示div单击按钮。默认情况下,我隐藏div。当我单击按钮时,它最初会起作用。但是我观察到,几秒钟后,div会自动隐藏或显示,而无需单击按钮。
纽扣
<div class="col-xs-12 col-sm-12 left-padding">
<?= Html::a('<i class="fa fa-search-plus"></i>'.Yii::t('app', ' Display Advanced Search'), [''], ['class' => 'btn btn-block btn-warning', 'onclick' => "advancedSearch()"]) ?>
</div>
用于隐藏或显示的Div
<div id="toggleSearch" class="col-xs-12" style="display:none">
<div class="box">
<div class="box-body table-responsive">
<div class="col-xs-12">
<h4><strong><u>Advanced Search</u></strong></h4>
</div>
<?php $form = ActiveForm::begin([
'enableAjaxValidation' => false,
'method' => 'get']); ?>
<div class="col-xs-12 col-lg-12 no-padding">
<div class="col-xs-12 col-sm-6 col-lg-6">
<?= $form->field($searchModel, 'zonal_office_id')->widget(Select2::classname(), [
'data' => ArrayHelper::map(app\models\ZonalOffice::find()->all(),'id','zonal_office_name'),
'language' => 'en',
'options' => ['placeholder' => 'Select Zonal Office ...'],
// 'disabled'=>'true',
'pluginOptions' => [
'allowClear' => true
],
]); ?>
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<?= $form->field($searchModel, 'state_name')->textInput(['maxlength' => 100, 'placeholder' => $searchModel->getAttributeLabel('state_name')]) ?>
</div>
</div>
<div class="col-xs-12 col-lg-12">
<div class="form-group">
<?= Html::submitButton('Click to Search', ['class' => 'btn btn-success']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
</div>
Java脚本
<script>
function advancedSearch() {
var x = document.getElementById("toggleSearch");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
如何解决该问题。谢谢
最佳答案
原因
这是因为您将url参数分配为具有空字符串的数组['']
,而不是具有javascript:void(0)
或'#.'
的字符串。
当您提供它['']
时,它将创建与您所在页面相同的URL,这意味着如果视图加载到URL http://example.com/dashboard/search
上,则会将相同的URL附加到锚点上。类似地,提供空字符串而不是数组会将路由dashboard/search
附加到锚点的href
上。
在您的情况下,它正在重新加载页面,这就是为什么您感觉到它被隐藏了,实际上是重新加载了页面并返回到初始状态。
为什么创建这些URL?BaseHtml::a()
调用Url::to($url);
,进一步调用
如果URL是数组static::toRoute($url, $scheme);
或为空['controller/action']
,则为['']
。Yii::$app->getRequest()->getUrl();
如果提供的URL是空字符串''
。
或者,如果不为空,则按原样添加字符串,例如javascript:void(0)
或'#.'
因此,将您的代码更改为
解决方案1
<?= Html::a('<i class="fa fa-search-plus"></i>' . Yii::t('app', ' Display Advanced Search'), '#.', ['class' => 'btn btn-block btn-warning', 'onclick' => "advancedSearch()"]) ?>
解决方案2
或使用jquery绑定javascript,但首先将名称为
advance_search
的类添加到锚点,然后从锚点中删除onclick
属性。<?= Html::a('<i class="fa fa-search-plus"></i>' . Yii::t('app', ' Display Advanced Search'), '#.', ['class' => 'advance_search btn btn-block btn-warning']) ?>
并将以下内容添加到您的视图文件的顶部
$js=<<< JS
$("a.advance_search").on('click',function(e){
e.preventDefault();
var x = document.getElementById("toggleSearch");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
JS;
$this->registerJs($js,\yii\web\view::POS_READY);