Question

我一直在研究具有可扩展/可折叠部分的部分。当我单击某个部分以将其展开或折叠时，会显示一个蓝色的聚焦区域，但它位于怪异的角度。我不知道是什么原因造成的，所以我想找到一种解决办法，要么摆脱它，要么以正常的水平角度放回原处。有人对如何解决此问题有任何建议吗？

我正在使用Macbook和Chrome浏览器。

此组件出现的整个灰色块都放置在一个角度，如从下面所附图像的顶部看到的那样，但与突出显示的焦点区域的方向相反。

我的CSS：

@import '../../theme/variables.css';

.rotatedSection {
  padding-bottom: 2rem;
}

.container {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  padding: 2rem 0;
  @media screen and (max-width: 68rem) {
    margin: 0 3rem;
  }
}

.accordianContainer {
  flex: 1;
  margin-right: 2rem;
  min-width: 500px;
  @media screen and (max-width: $tablet-lg-max-width) {
    margin-right: 0;
  }
  @media screen and (max-width: 900px) {
    min-width: 0;
  }
}

.imageContainer {
  flex: 1;
  margin-left: 2rem;
  max-height: 300px;
  display: flex;
  justify-content: center;
  img {
    flex: 1;
  }
  @media screen and (max-width: $tablet-lg-max-width) {
    margin-left: 0;
  }
}

.heading {
  composes: h2 from 'theme/text';
  margin-left: auto;
  margin-right: auto;
}

我的反应代码：

import React, {Component, PropTypes} from 'react';

import RotatedSection from 'components/RotatedSection';
import AccordionItem from './AccordionItem';

import css from './styles.css';

class AccordionSectionWithImage extends Component {
  constructor (props) {
    super(props);

    this.state = {
      activeIndex: null,
    };

    this.onOpen = this.onOpen.bind(this);
    this.onClose = this.onClose.bind(this);
    this.setActive = this.setActive.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  onOpen = (index) => {
    this.setActive(index);
  };

  onClose = (callback = () => null) => {
    this.setActive(null);
    callback();
  };

  setActive = (activeIndex) => this.setState({activeIndex});

  handleClickOutside = () => this.props.collapseOnBlur && this.onClose();

  render () {
    const {
      entry: {
        items,
        heading,
        image,
      },
      showIndex,
      classNames,
      meta = {},
    } = this.props;

    const {routeParams, toggleHamburger} = meta;
    const {activeIndex} = this.state;

    return (
      <RotatedSection color='whisper' className={css.rotatedSection}>
        <div className={css.container}>
          <div className={css.accordianContainer}>
            <h2 className={css.heading}>{heading}</h2>
            {items && items.map((item, index) => (
              <AccordionItem
                key={index}
                showIndex={showIndex}
                entry={item}
                meta={{
                  position: index,
                  isOpen: (index === activeIndex),
                  onOpen: () => this.onOpen(index),
                  onClose: () => this.onClose(),
                  onChildClick: () => this.onClose(toggleHamburger),
                  routeParams,
                }}
                classNames={classNames}
              />
            ))}
          </div>
          <div className={css.imageContainer}>
            <img src={image && image.fields && image.fields.file.url} alt='Educational assessment' />
          </div>
        </div>
      </RotatedSection>
    );
  }
}

AccordionSectionWithImage.propTypes = {
  meta: PropTypes.object,
  entry: PropTypes.object,
  collapseOnBlur: PropTypes.bool,
  showIndex: PropTypes.bool,
  classNames: PropTypes.object,
};

export default AccordionSectionWithImage;

个别部分的反应成分：

function AccordionItem (props) {
  const {
    meta: {
      isOpen,
      onOpen,
      onClose,
    },
    entry: {
      heading,
      text,
    },
  } = props;

  const handleClick = () => (isOpen ? onClose() : onOpen());

  return (
    <div className={css.itemContainer}>
      <div className={css.innerContainer}>
        <h3 className={css.heading} onClick={handleClick}>
          <span className={css.titleText}>{heading}</span>
          <i className={`zmdi zmdi-plus ${css.titleToggle}`} />
        </h3>
        {isOpen && (
          <div className={css.contents}>
            {text}
          </div>
        )}
      </div>
    </div>
  );
}

Answer 1

对于遇到类似问题的其他人：

问题仅出现在手机和chrome inspector的设备模式下。这是由于tap-highlight属性。

将-webkit-tap-highlight-color设置为rgba（0,0,0,0）隐藏了该问题，但这是非标准的CSS属性，因此该解决方案可能不适用于所有设备/浏览器/用户。

无法摆脱蓝色高光

1 个答案: