Javascript 如何使React语义ui像在移动设备上一样垂直下拉？
我的网站上有一个可堆叠的菜单和下拉菜单。在手机上一切正常，但当我在ipad上测试我的网站时，下拉菜单不可堆叠，一些内容也不显示（例如About） 以下是我的网站在每个设备上的外观： 在手机上Javascript 如何使React语义ui像在移动设备上一样垂直下拉？,javascript,reactjs,web,semantic-ui,mobile-website,Javascript,Reactjs,Web,Semantic Ui,Mobile Website,我的网站上有一个可堆叠的菜单和下拉菜单。在手机上一切正常，但当我在ipad上测试我的网站时，下拉菜单不可堆叠，一些内容也不显示（例如About） 以下是我的网站在每个设备上的外观： 在手机上 <Menu fixed="top" stackable borderless fluid style={{ marginTop: '0em', marg
<Menu
fixed="top"
stackable
borderless
fluid
style={{
marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
>
<Menu.Item
style={{
textAlign: 'right',
display: 'block',
fontSize: '1.5em',
}}
>
<Icon
onClick={this.handleIconClick}
> <i
className="animated infinite bounce iconsmind icon-Arrow-Up"
/>
</Icon>
</Menu.Item>
{menu.items.map((item) => {
if (item.menu_item_parent === '0') {
const menuList = menu.items.filter(
i => i.menu_item_parent === item.ID.toString(),
);
if (menuList.length === 0) {
return (
<Menu.Item
as="a"
key={item.ID}
link
href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
style={{
textAlign: 'Left',
display: 'block',
fontSize: '1.5em',
}}
>
{item.title}
</Menu.Item>
);
}
return (
<Dropdown
floating
item
text={item.title}
key={item.ID}
style={{
textAlign: 'Left',
display: 'block',
fontSize: '1.5em',
}}
>
<Dropdown.Menu>
{menuList.map(i => (
<Dropdown.Item
key={i.ID}
href={`/${item.url
.split(config.wp_url)[1]
.slice(0, -1)}/${i.url
.split(config.wp_url)[1]
.slice(0, -1)}`}
>
{i.title}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
);
}
return null;
})}
</Menu>
@media only screen and (max-width: 800px) // or any width you want stackable menu on
.ui.stackable.menu .item {
width: 100%!important;
}
<Menu
fixed="top"
stackable
borderless
fluid
style={{
marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
>
<Menu.Item
style={{
textAlign: 'right',
display: 'block',
fontSize: '1.5em',
}}
>
<Icon
onClick={this.handleIconClick}
> <i
className="animated infinite bounce iconsmind icon-Arrow-Up"
/>
</Icon>
</Menu.Item>
{menu.items.map((item) => {
if (item.menu_item_parent === '0') {
const menuList = menu.items.filter(
i => i.menu_item_parent === item.ID.toString(),
);
if (menuList.length === 0) {
return (
<Menu.Item
as="a"
key={item.ID}
link
href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
style={{
textAlign: 'Left',
display: 'block',
fontSize: '1.5em',
}}
>
{item.title}
</Menu.Item>
);
}
return (
<Dropdown
floating
item
text={item.title}
key={item.ID}
style={{
textAlign: 'Left',
display: 'block',
fontSize: '1.5em',
}}
>
<Dropdown.Menu>
{menuList.map(i => (
<Dropdown.Item
key={i.ID}
href={`/${item.url
.split(config.wp_url)[1]
.slice(0, -1)}/${i.url
.split(config.wp_url)[1]
.slice(0, -1)}`}
>
{i.title}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
);
}
return null;
})}
</Menu>
@media only screen and (max-width: 800px) // or any width you want stackable menu on
.ui.stackable.menu .item {
width: 100%!important;
}
{menu.items.map（（item）=>{
如果（item.menu\u item\u parent=='0'）{
const menuList=menu.items.filter(
i=>i.menu\u item\u parent===item.ID.toString（），
);
if（menuList.length==0）{
返回(
{item.title}
);
}
返回(
{menuList.map（i=>(
{i.title}
))}
);
}
返回null；
})}
那么，我怎样才能让ipad上的下拉菜单像在手机上看到的那样垂直下降呢 根据最新的React语义UI文档。语义ui的react包装器不支持它
语义用户界面堆栈菜单在移动，您将需要改变，以适应您的情况 您需要手动覆盖语义ui css设置的最大宽度
import 'semantic-ui-css/semantic.min.css';
import './styles/css/Index.css'; // the file that contains custom styling
@media only screen and (max-width: 767px)
.ui.stackable.menu .item {
width: 100%!important;
}
<Menu
fixed="top"
stackable
borderless
fluid
style={{
marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
>
<Menu.Item
style={{
textAlign: 'right',
display: 'block',
fontSize: '1.5em',
}}
>
<Icon
onClick={this.handleIconClick}
> <i
className="animated infinite bounce iconsmind icon-Arrow-Up"
/>
</Icon>
</Menu.Item>
{menu.items.map((item) => {
if (item.menu_item_parent === '0') {
const menuList = menu.items.filter(
i => i.menu_item_parent === item.ID.toString(),
);
if (menuList.length === 0) {
return (
<Menu.Item
as="a"
key={item.ID}
link
href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
style={{
textAlign: 'Left',
display: 'block',
fontSize: '1.5em',
}}
>
{item.title}
</Menu.Item>
);
}
return (
<Dropdown
floating
item
text={item.title}
key={item.ID}
style={{
textAlign: 'Left',
display: 'block',
fontSize: '1.5em',
}}
>
<Dropdown.Menu>
{menuList.map(i => (
<Dropdown.Item
key={i.ID}
href={`/${item.url
.split(config.wp_url)[1]
.slice(0, -1)}/${i.url
.split(config.wp_url)[1]
.slice(0, -1)}`}
>
{i.title}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
);
}
return null;
})}
</Menu>
@media only screen and (max-width: 800px) // or any width you want stackable menu on
.ui.stackable.menu .item {
width: 100%!important;
}
⚠️ 注意：您应该在导入语义ui css后包含css文件
import 'semantic-ui-css/semantic.min.css';
import './styles/css/Index.css'; // the file that contains custom styling
你考虑使用CSS媒体吗？更新您的问题，使其包含一个，人们将更容易回答。其呈现方式由语义ui决定。如果它不选择像ipad那样以更高的分辨率堆叠，那么你需要手动覆盖css中的导航栏样式！重要的。