当我从下拉菜单中选择类别时,它会在输入字段中正确更新。理想情况下,它应该更新recipeIndex中的配方过滤器。php。
我尝试用方法“将输入包装在表单中”;获取(&Q);但这仍然不起作用。
HTML位于配方索引页面上的HTML小部件中。CSS、JavaScript和PHP代码在单独的代码段中(我使用Woody snippets Wordpress插件https://wordpress.org/plugins/insert-php/)
请帮忙。
HTML
<div class="dropdown_container">
<div class="dropdown">
<div class="select">
<span class="select_span">Select Category</span>
<i class="fa fa-chevron-down"></i>
</div>
<form action="" method="get">
<input type="hidden" name="category" id="category">
</form>
<ul class="dropdown-menu" id="recipeDropdown">
<li id="All" name="All" value="All">All</li>
<li id="Vegan" name="Vegan" value="Vegan">Vegan</li>
<li id="Vegetarian" name="Vegetarian" value="Vegetarian">Vegetarian</li>
</ul>
</div>
</div>
CSS
.dropdown_container {
width: 160px;
}
.select {
width: 160px;
}
/*Styling Selectbox*/
.dropdown {
width: 160px;
display: inline-block;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 0 2px rgb(204, 204, 204);
transition: all .5s ease;
position: relative;
font-size: 14px;
color: #474747;
height: 100%;
text-align: left
}
.dropdown .select {
cursor: pointer;
display: block;
padding: 10px;
}
.dropdown .select > i {
font-size: 13px;
color: #888;
cursor: pointer;
transition: all .3s ease-in-out;
float: right;
line-height: 15px
}
.dropdown:hover {
box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
box-shadow: 0 0 4px rgb(204, 204, 204);
border-radius: 2px 2px 0 0;
background-color: #f8f8f8
}
.dropdown.active .select > i {
transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
width: 100%;
position: absolute;
background-color: #fff;
left: 0;
margin-top: 1px;
box-shadow: 0 1px 2px rgb(204, 204, 204);
border-radius: 0 1px 2px 2px;
overflow: hidden;
display: none;
overflow-y: auto;
z-index: 9
}
.dropdown .dropdown-menu li {
transition: all .2s ease-in-out;
cursor: pointer
}
.dropdown .dropdown-menu {
padding: 0;
list-style: none
}
.dropdown .dropdown-menu li:hover {
background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
background-color: #e2e2e2
}
JavaScript
var $ = jQuery;
$(\'.dropdown\').click(function () {
$(this).attr(\'tabindex\', 1).focus();
$(this).toggleClass(\'active\');
$(this).find(\'.dropdown-menu\').slideToggle(300);
});
$(\'.dropdown\').focusout(function () {
$(this).removeClass(\'active\');
$(this).find(\'.dropdown-menu\').slideUp(300);
});
$(\'.dropdown .dropdown-menu li\').click(function () {
var value = $(this).attr("value");
$("input[name=\'category\']").val(value);
$(this).parents(\'.dropdown\').find(\'span\').text($(this).text());
$(this).parents(\'.dropdown\').find(\'input\').attr(\'value\', $(this).attr(\'id\'));
});
PHP
// Posts or Portfolio Widget
add_action( \'elementor/query/recipe-index-filter\', function( $query ) {
// Modify the posts query here
$category = $_GET[\'category\'];
$query->set( \'category_name\', $category );
} );