我有一个单一的观点dashboard.blade.php。
它有多种形式。我已经data-toggle='collapse在<a>元素中设置了数据属性。
使用键盘向下箭头方法时，这适用于单个表单。
再次单击时arrow，第一个表单将从视图中隐藏。
但是，当我单击 second 时<a>，虽然第一个表单已经打开，但两个表单同时显示。
我需要管理它以一次显示一个表单并通过单击下一个表单来隐藏另一个表单。
下面是我的代码（dashboard.blade.php）。
第一种形式：
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse"
data-parent="#accordion3"
href="#collapseTwo3"
aria-expanded="false"
aria-controls="collapseTwo3"
data-expandable="false"><i class="material-icons pmd-sm pmd-accordion-icon-left">toys</i>Brands
<i class="material-icons md-dark pmd-sm pmd-accordion-arrow">keyboard_arrow_down</i></a>
</h4>
</div>
<div id="collapseTwo3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form class="form-horizontal"
method="post"
enctype="multipart/form-data"
action="{{ url('importBrands') }}">
{{ csrf_field() }}
<div class="form-group files">
<label>Upload Your File</label>
<input type="file" name="import_file" />
</div>
<div align="right">
<!-- <button class="btn btn-primary">Export</button> -->
<button class="btn btn-primary">Import</button>
</div>
</form>
</div>
</div>
</div>
第二种形式：
<div class="panel">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a data-toggle="collapse"
data-parent="#accordion3"
href="#collapseThree3"
aria-expanded="false"
aria-controls="collapseThree3"
data-expandable="false"><i class="material-icons pmd-sm pmd-accordion-icon-left">category</i>Categories
<i class="material-icons md-dark pmd-sm pmd-accordion-arrow">keyboard_arrow_down</i></a>
</h4>
</div>
<div id="collapseThree3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<form class="form-horizontal"
method="post"
enctype="multipart/form-data"
action="{{ url('importCategories') }}">
{{ csrf_field() }}
<div class="form-group files">
<label>Upload Your File</label>
<input type="file" name="import_file" />
</div>
<div align="right">
<!-- <button class="btn btn-primary">Export</button> -->
<button class="btn btn-primary">Import</button>
</div>
</form>
</div>
</div>
</div>
材料.js
var FloatingLabel = function ($$$1) {
// constants >>>
var DATA_KEY = 'md.floatinglabel';
var EVENT_KEY = "." + DATA_KEY;
var NAME = 'floatinglabel';
var NO_CONFLICT = $$$1.fn[NAME];
var ClassName = {
IS_FOCUSED: 'is-focused',
HAS_VALUE: 'has-value'
};
var Event = {
CHANGE: "change" + EVENT_KEY,
FOCUSIN: "focusin" + EVENT_KEY,
FOCUSOUT: "focusout" + EVENT_KEY
};
var Selector = {
DATA_PARENT: '.floating-label',
DATA_TOGGLE: '.floating-label .custom-select, .floating-label .form-control' // <<< constants
};
var FloatingLabel =
/*#__PURE__*/
function () {
function FloatingLabel(element) {
this._element = element;
this._parent = $$$1(element).closest(Selector.DATA_PARENT)[0];
}
var _proto = FloatingLabel.prototype;
_proto.change = function change() {
if ($$$1(this._element).val() || $$$1(this._element).is('select') && $$$1('option:first-child', $$$1(this._element)).html().replace(' ', '') !== '') {
$$$1(this._parent).addClass(ClassName.HAS_VALUE);
} else {
$$$1(this._parent).removeClass(ClassName.HAS_VALUE);
}
};
_proto.focusin = function focusin() {
$$$1(this._parent).addClass(ClassName.IS_FOCUSED);
};
_proto.focusout = function focusout() {
$$$1(this._parent).removeClass(ClassName.IS_FOCUSED);
};
FloatingLabel._jQueryInterface = function _jQueryInterface(event) {
return this.each(function () {
var _event = event ? event : 'change';
var data = $$$1(this).data(DATA_KEY);
if (!data) {
data = new FloatingLabel(this);
$$$1(this).data(DATA_KEY, data);
}
if (typeof _event === 'string') {
if (typeof data[_event] === 'undefined') {
throw new Error("No method named \"" + _event + "\"");
}
data[_event]();
}
});
};
return FloatingLabel;
}();
$$$1(document).on(Event.CHANGE + " " + Event.FOCUSIN + " " + Event.FOCUSOUT, Selector.DATA_TOGGLE, function (event) {
FloatingLabel._jQueryInterface.call($$$1(this), event.type);
});
$$$1.fn[NAME] = FloatingLabel._jQueryInterface;
$$$1.fn[NAME].Constructor = FloatingLabel;
$$$1.fn[NAME].noConflict = function () {
$$$1.fn[NAME] = NO_CONFLICT;
return FloatingLabel._jQueryInterface;
};
return FloatingLabel;
}($);